利用CSS实现三角效果

最新推荐文章于 2024-04-13 15:44:30 发布

-网络游客

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量231

点赞数

分类专栏： html 文章标签： css css三角形

本文链接：https://blog.csdn.net/u012146567/article/details/79296228

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实例一：三角箭头

思路：利用元素border设置边框，再用transform选择元素，实现三角箭头效果

原理：元素border可以分别设置

设置一组邻边显示，一组邻边不显示，达到直角效果，把color设置成transparent，不懂transparent的自行百度吧

再用transform旋转，这里是顺时针旋转了45°，根据自己需求设置就行了

Deom：

<i class="triangle1"></i> 
<style>
.triangle1 {    
     transform: rotate(45deg);    
     display: block;    
     width: 12px;    
     height: 12px;    
     border: 1px solid #9e9e9e;    
     border-top-color: transparent;    
     border-right-color: transparent;    
     background-color: #fff;    
}
</style>

实例一：实心三角形

思路：利用元素border宽度撑起三角形，并把width和height设置成0px

原理：同上，元素border可以分别设置，不同的是实例一border是1px，而实心三角形就得宽点了

同样，把其他三边的color设置成transparent

demo：

<i class="triangle2"></i>
<style>
.triangle2 {    
     display: block;       
     width: 0;    
     border-width: 10px;    
     border-color: transparent transparent red;    
     border-style: dashed dashed solid;        
} 
</style>

小贴士：学会经常使用伪元素例如after或before来实现三角形

原文链接：http://www.webstr.top/post/9.html