CSS三角形

1、使用border来绘制三角形

border绘制三角形利用了边框边角处等分的道理。准备一个宽高都为0的元素，为其设置边框，其中三条边框的颜色设置为transparent被覆盖，剩下的就是一个三角形了。

<div id="container">
       <div class="trigle"></div>
    </div>

<style>
        #container {
            background-color: aquamarine;
            width: 600px;
            height: 400px;
            margin-top: 135px;
        }

        .trigle {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid yellow;
        }       
    </style>

二、利用transform和overflow遮盖展示三角形

 

.trigle {
            width: 140px;
            height: 100px;
            position: relative;
            overflow: hidden;           
        }    
        .trigle::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: deeppink;
            transform-origin: left bottom;
            transform: rotate(45deg);
        }   

三、利用实体字符来展示三角形

<div id="container">
       <div class="trigle">&#9650</div>
    </div>

 .trigle {
            color: deeppink;          
            font-style: 100px;
        }