css3箭頭 |css链接样式外部链接

使用 CSS3 制作箭头经常应用于网页设计和语音演讲PPT设计中，如下是使用伪元素制作箭头的代码示例：

.arrow {
position: relative;
width: 15px;
height: 15px;
border-top: 10px solid blue;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

这里大家为箭头容器设置了相对定位，以便与制作箭头的::before伪元素共用位置。箭头容器的宽高可以按需设置。 大家通过设置三个不同的 border 属性，达到制作细头向上的箭头的目的。其中，border-top 方向的边框可以确定箭头的长度，border-right 和 border-left 方向的边框可以实现箭头的斜边效果。 当然，大家还可以制作其他方向的箭头，如下是制作向右箭头的代码示例：

.arrow-right {
position: relative;
width: 15px;
height: 15px;
border-right: 10px solid blue;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

大家将右边的边框设置为蓝色，且长度为箭头的长度，同时设置顶部和底部的边框为透明，以达到制作细头向右的箭头的目的。 总结一下，通过使用 CSS3 的 border 属性，大家可以很方便地制作出各种方向的箭头，为网页设计以及语音演讲 PPT 设计提供了很大的便利。