技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS伪元素:before和:after实现各种方向及大小的三角形箭头

作者:admin    时间:2023-3-4 7:58:44    浏览:

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

效果图

 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通过设置几个属性:borderborder-left等,画出三角形。

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

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

 各种方向及大小的三角形

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

总结

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

相关文章

x
  • 站长推荐
/* 左侧显示文章内容目录 */