CSS3 对话箭头是一种在网页设计中常见的元素,一般用于展示聊天记录、评论等内容。这种箭头可以通过 CSS3 中的伪元素实现。
.dialog { position: relative; } .dialog:before { content: ""; width: 0; height: 0; position: absolute; top: 20px; left: -10px; border-top: 10px solid transparent; border-right: 10px solid #ccc; border-bottom: 10px solid transparent; }
代码中,首先将父元素 .dialog 定位为相对定位。然后使用伪元素 :before 创建一个空元素,并定义其为绝对定位。接着,通过 border-top、border-right 和 border-bottom 三个属性,分别绘制上、右、下三条线段,组成一个箭头形状。将箭头定位到左侧并留有一定间距,效果如下:
你好!
当然,对话箭头的样式还可以做更多的变化,如边框颜色、箭头大小、箭头位置等等。只需灵活运用 CSS3 的伪元素和相关属性,就能轻松实现多种样式的对话箭头。