純css如何繪制三角形_利用border實現畫三角形的原理方法

使用css畫三角形，首先想到的思路是：利用border邊框樣式來實現，這是由於border的邊框是由四個三角形組成的。

 

首先生成一個帶邊框寬高為0的div：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width: 50px;
	border-style: solid;
	border-color: red green blue brown;
}
</style>
<!--寬度為100px-->	
<div class="dom"></div>

　　

 

取消其它三邊的顏色形成三角形：

這里我們利用transparent的透明顏色來代替。就可以實現了。如下：

1、css向下三角形：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width: 40px;
	border-style: solid;
	border-color: red transparent transparent transparent;
        /*或者border-color: transparent transparent red;*/
}
</style>
<div class="dom"></div>

　　

 

2、css向上三角形：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width: 40px;
	border-style: solid;
	border-color: transparent transparent blue transparent; 
        /*或者border-color:blue transparent transparent*/
}
</style>
<div class="dom"></div>

　　

 

3、css向左三角形：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width: 40px;
	border-style: solid;
	border-color: transparent green transparent transparent;
}
</style>
<div class="dom"></div>

　　

 

4、css向右三角形：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width: 40px;
	border-style: solid;
	border-color: transparent transparent transparent brown;
}
</style>
<div class="dom"></div>

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

css如何實現邊框的三角形呢？

上面實現的三角形都是沒有帶邊框的，如果在需求中需要實現帶邊框的三角形改如何實現呢？思路為：思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設置成邊框所需的顏色；內層三角形絕對定位在里面。整體就能形成帶邊框三角形的假象。

以css向上帶邊框三角形為例：

<style>
.dom{
	width: 0px;
	height: 0px;
	border-width:0 40px 40px;
	border-style: solid;
	border-color:  transparent transparent #333;
	position: relative;
}
.dom:after{
	content:"";
	display: block;
	width: 0px;
	height: 0px;
	border-width: 0 38px 38px;
	border-style: solid;
	border-color: transparent transparent red;
	position: absolute;
	top:1px;
    left:-38px;
}
</style>
<div class="dom"></div>