css3写铅笔箭头 |css所有浏览器

.arrow {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #000;
}
.arrow:before {
content: "";
position: absolute;
top: -5px;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #fff;
}
.arrow:after {
content: "";
position: absolute;
top: -5px;
left: -12px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #000;
}

上面的代码中，大家使用了Pseudo-Elements来分别创建箭头的两段和箭头顶端的三角形。大家在主元素上设置了position: relative属性，以便让伪元素相对于它进行定位。

通过设置不同的border-width和border-color属性，大家可以呈现出不同的箭头样式。这是CSS3的一个非常强大的功能，可以让大家轻松地创建出各种复杂的效果。

如果您想尝试一些不同的样式，可以更改border-width、border-color和箭头的角度。请注意，角度实际上是通过调整箭头的边框宽度，而不是旋转箭头元素来实现的。

总的来说，使用CSS3创建铅笔箭头是一个简单而有趣的过程。它可以帮助您加强您的设计技能，并让您的网站更加生动活泼。