技術標籤：css

網頁中常見的一些三角形，使用CSS直接畫出來即可，不必做成圖片或者字型圖示。

將長和寬設定為0，再給每條邊上色，即可在一個正方形中畫出四個以正方形中心為頂點的三角形。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    width: 0;
    height: 0;
    border-top: 10px solid pink;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
    border-left: 10px solid green;
}
.box2 {
    width: 0;
    height: 0;
    /* 將其他邊框改為透明色，只留上邊框為粉色，即可得到一個向下的三角*/
    border: 50px solid transparent;
    border-top-color: pink;
    margin: 0 auto;
}
 

效果如圖：

案例：實現以下效果圖

<div class="box">
    <span></span>
</div>

.box { 
    position: relative;
    width: 120px;
    height: 250px;
    background-color: pink;
}
.box span {
    position: absolute;
    right: 15px;
    top: -10px;
    width:0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 5px solid transparent;
    border-left-color: pink;
}