卡卡网

我们经常在网页上看到各种有意思的小三角形箭头，尤其是在菜单栏目上。今天我介绍如何使用CSS伪元素:before和:after实现各种方向及大小的三角形箭头。

效果图

demodownload

实例介绍

在一段文字后面加上一个小三角形。

HTML代码

<div class="demo">这里是卡卡测速网</div>

通过类class="demo"，在这div后面加上一个小三角形。

CSS代码

.demo:after{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 10px solid #AFABAB;
  position: relative;
  top: 2px;
  left: 10px;
}

伪元素:after通过设置几个属性：border、border-left等，画出三角形。

如果border-left改为border-right、border-top、border-bottom，将画出不同方向的三角形，而这个属性的值10px，则可设置三角形的宽度。

border属性，8px，是三角形的高度，我们可以更改该数值设置三角形的高度。

CSS伪元素:after若用:before代替，则三角形将出现在div容器的前面。

总结

本文介绍了CSS伪元素:before和:after实现各种方向及大小的三角形箭头，代码很少，但很实用。

相关文章

• CSS隐藏元素的10种方法之：使用::after伪元素
• 弄清这两点，你就知道伪元素与伪类的不同及使用区别了
• 纯CSS伪元素创建的84个小图标
• 漂亮的伪元素CSS按钮5个实例代码

标签: 伪元素  after伪元素  before伪元素