CSS实现三角效果的简单实例

前端  /  管理员 发布于 8年前   233

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

XML/HTML Code复制内容到剪贴板

1. <i class="triangle"></i>    
2.      
3. .triangle {    
4.      transform: rotate(45deg);    
5.      display: block;    
6.      width: 12px;    
7.      height: 12px;    
8.      border: 1px solid #9e9e9e;    
9.      border-top-color: transparent;    
10.      border-right-color: transparent;    
11.      background-color: #fff;    
12. }    

效果：

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

 

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

XML/HTML Code复制内容到剪贴板

1. <i class="triangle"></i>    
2.      
3. .triangle {    
4.      display: block;    
5.      position: absolute;    
6.      width: 0;    
7.      border-width: 6px;    
8.      border-color: transparent transparent red;    
9.      border-style: dashed dashed solid;    
10.      top: -12px;    
11.      right: 76px;    
12. }    

效果：

 

应用场景：点击234或者点击选中的时候三角形指向对应的选项

 

小贴士：

    1、学会经常使用伪元素例如after或者before来实现三角形

    2、两种方法的区别：第二种方法设置的三角形背景色和边框的颜色相同；第一种方法设置的三角形背景色和边框的颜色可以不相同；需要根据不同应用场景效果来选择方法。

第二种方法也可以通过使用两个颜色不同的三角形覆盖来实现背景色和边框色不同的效果。

以上这篇CSS实现三角效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。