css實現實心三角形、有邊框的三角形和空心三角形
阿新 • • 發佈:2019-02-14
1、實心三角形
<div class="up"></div> <!--向上的三角形-->
<div class="down"></div> <!--向下的三角形-->
<div class="left"></div> <!--向左的三角形-->
<div class="right"></div> <!--向右的三角形-->
/*想獲取朝那邊三角形,給相反的一邊設定顏色,font-size: 0;line-height: 0;可以相容ie6*/ .up{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #f00;font-size: 0;line-height: 0;} .down{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #f00;font-size: 0;line-height: 0;} .left{width: 0;height: 0;border-top: 20px solid transparent;border-right: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;} .right{width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}
2、有邊框的三角形
<!--向上的三角形--> <div class="border-up"> <span></span> </div> <!--向下的三角形--> <div class="border-down"> <span></span> </div> <!--向左的三角形--> <div class="border-left"> <span></span> </div> <!--向右的三角形--> <div class="border-right"> <span></span> </div>
.border-up{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;} .border-up span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 1px;} .border-down{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;} .border-down span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -29px;} .border-left{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;} .border-left span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 1px;top: -28px;} .border-right{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;} .border-right span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -29px;top: -28px;}
3、空心三角形
<!--空心的三角形-->
<!--向上的三角形-->
<div class="border-up-empty">
<span></span>
</div>
<!--向下的三角形-->
<div class="border-down-empty">
<span></span>
</div>
<!--向左的三角形-->
<div class="border-left-empty">
<span></span>
</div>
<!--向右的三角形-->
<div class="border-right-empty">
<span></span>
</div>
.border-up-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;}
.border-up-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 2px;}
.border-down-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;}
.border-down-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -30px;}
.border-left-empty{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-left-empty span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 2px;top: -28px;}
.border-right-empty{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-right-empty span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -30px;top: -28px;}
其實空心三角形就是對有邊框的三角形的定位改變