這裡我列舉的兩種方法：一種用邊框也就是border實現（比較簡單）另一種是用五個div旋轉溢位隱藏實現

一、用border

在我們平常使用邊框的時候往往是一個很窄的邊框，所以在視覺效果上邊框看似為直線，事實呢？

給一個小的盒子加一個很寬的邊框，如下：

html程式碼：

<div id="triangle"></div>

css程式碼：

#triangle{
		margin:0 auto;

		width: 20px;
		height: 20px;
		border-left: 173.2px solid red;
		border-top: 100px solid blue;
		border-right: 173.2px solid green;
		border-bottom: 100px solid black;
	}
 

可以明顯的看出其實並不是像想的那樣邊框是直線或者矩形。其實它是體型滴~

下面我們去掉盒子的寬度（都變為0），css如下：

#triangle{
		margin:0 auto;

		width: 0px;
		height: 0px;
		border-left: 173.2px solid red;
		border-top: 100px solid blue;
		border-right: 173.2px solid green;
		border-bottom: 100px solid black;
	}

由四個三角形組成的矩形就出來了。。。如果我們想要三角形只需要把其中的三個三角形（即邊框）的顏色變為透明即可

#triangle{
		margin:0 auto;

		width: 0px;
		height: 0px;
		border-left: 173.2px solid transparent;
		border-top: 100px solid transparent;
		border-right: 173.2px solid green;
		border-bottom: 100px solid transparent;
	}

三角形出來了。。。

而三角形的角度只需要通過調節邊框的長度即可控制，具體多少就是簡單的數學問題

了（三角函式，勾股定理。。）

上述例中長度大概按 1 : 2 : 1.732 來就是正三角形了

如果看著不舒服或者要求需要可以用 transform：rotate（指定角度）；旋轉即可

二、用五個div

<div class="d1">
    <div class="d2">
        <div class="d3">
            <div class="d4">
                <div class="d5"></div>
            </div>		
        </div>
    </div>
</div>

.d1,.d2,.d3,.d4,.d5{
			width: 200px;
			height: 200px;
			overflow: hidden;
			position: absolute;
		}
		/*d1與d4位置重合*/
		.d1{
			left:50%;
			top: 20%;
			border: 1px solid pink;
			transform: rotate(30deg);
			transform-origin:200px 200px;
		}
		.d2{
			transform: rotate(-30deg);
			transform-origin:0 200px;
			/*background: blue;*/
		}
		.d3{
			transform: rotate(-30deg);
			transform-origin:200px 200px;
			border: 1px solid red;
			background: red;
		}
		.d4{
			border: 1px solid green;
			background: green;
			transform: rotate(-30deg) ;
			transform-origin:200px 0;

		}
		.d5{
			border: 1px solid black;
			background: black;
			transform: rotate(-30deg) ;
			transform-origin:0 0;
		}

在沒有設定溢位隱藏時：

然後 加上overflow：hidden：

這個超麻煩。。還是border吧，自己玩玩還可以