CSS实现三角效果

来源：动视网责编：小采时间：2020-11-27 15:39:42

CSS实现三角效果

CSS实现三角效果:方法一：使用border来设置边框，元素有高度和宽度 .triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-color: transparent; bo

推荐度：

点击下载本文 文档为doc格式

导读CSS实现三角效果:方法一：使用border来设置边框，元素有高度和宽度 .triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-color: transparent; bo

方法一：使用border来设置边框，元素有高度和宽度



.triangle {
 transform: rotate(45deg);
 display: block;
 width: 12px;
 height: 12px;
 border: 1px solid #9e9e9e;
 border-top-color: transparent;
 border-right-color: transparent;
 background-color: #fff;
}

效果：

利用transform属性可以旋转三角形，达到想要的效果。

方法二：利用border来撑起来三角形



.triangle {
 display: block;
 position: absolute;
 width: 0;
 border-width: 6px;
 border-color: transparent transparent red;
 border-style: dashed dashed solid;
 top: -12px;
 right: 76px;
}

效果：