学习链接

border-width

border-style

纯CSS画三角原理解析

CSS画三角形原理

The Shapes of CSS(很多案例)

CSS 画三角形

HTML

<div class="triangle"></div>

border 的划分

CSS

.triangle {
    width: 30px;
    height: 30px;
    border: 15px solid;
    border-color: lightseagreen lightskyblue;
}

.triangle {
    width: 0;
    height: 0;
    border: 15px solid;
    border-color: lightseagreen lightskyblue;
}

画三角形

transparent 透明

.triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid lightseagreen;
}

.triangle {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 40px solid lightseagreen;
}