一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图,感觉不错请参考实例代码。
二、效果
三、代码
css;toolbar:false"><style> #talkbubble { width: 160px; height: 80px; background: red; position: relative; border-radius: 10px; margin-left:20px; } #talkbubble:before { content: ""; position: absolute; right: 100%; top: 26px; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; } </style> <div id="talkbubble"></div>
补充:纯css实现气泡对话框尖角处理
先来看一下效果图:
简单粗暴上代码:
html:
<div class="dialog-box"> <span class="bot"></span> <span class="top"></span> </div>
less: .dialog-box { position: relative; span { width:0; height:0; font-size:0; overflow:hidden; position:absolute; &.bot{ border-width: 15px; border-style: solid dashed dashed; border-color: transparent transparent #F9743A transparent; left: 15px; top: -29px; } &.top{ border-width:13px; border-style:solid dashed dashed; border-color:transparent transparent #fff transparent; left:17px; top:-25px; } } }
大白话讲解:
如果你想要其他方位的尖角,就调整boder-color
的顺序(上,右,下,左)。
主要的原理大概是有两个一样形状,比例不同的小三角,一个和底色一样的实心三角bot,一个白色底的top,并且top是会盖在bot上面的,然后调整它们的大小(一般来说实心要比白色块大一点,这样才可以显示出有眼色的边边啊)。
最后想尽一切办法让它们重合(白色的top在上面,实心的bot在下面),最后通过调整绝对定位的参数(left,top)让其重合的天衣无缝。好了,大功告成啦,不知道你get到了没有?
总结
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。