CSS中怎么实现三角效果

这篇文章给大家介绍CSS中怎么实现三角效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司专业为企业提供昌宁网站建设、昌宁做网站、昌宁网站设计、昌宁网站制作等企业网站建设、网页设计与制作、昌宁企业网站模板建站服务，10多年昌宁做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

2.     
        
   .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来撑起来三角形

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

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

效果：

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

小贴士：

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

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

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

关于CSS中怎么实现三角效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前名称：CSS中怎么实现三角效果
文章URL：http://6mz.cn/article/jjcsid.html