HTML如何设置四边形,css实现三角形和平形四边形

一、三角形

.father {

width: 0px;

height: 0px;

border: 50px solid black;

}

只设置border

.father {

width: 0px;

height: 0px;

border-top: 50px solid black;

border-right: 50px solid red;

border-bottom: 50px solid green;

border-left: 50px solid blue;

}

设置四个border

// transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色

.father {

width: 0px;

height: 0px;

border-top: 50px solid black;

border-right: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid transparent;

}

.caret {

width: 0;

height: 0;

border: 50px solid transparent;

border-top-color: black;

}

三角形

// 节省空间的三角形

.father {

width: 0px;

height: 0px;

border-top: 50px solid black;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

节省空间的三角形

// 等腰梯形

.father {

width: 50px;

height: 0px;

border-top: 50px solid black;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

等腰梯形

// 中空的图形

.father {

width: 50px;

height: 50px;

border-top: 50px solid black;

border-right: 50px solid red;

border-bottom: 50px solid green;

border-left: 50px solid blue;

}

中空的图形

// 平形四边形

body {

margin: 0;

padding: 0;

}

.father1 {

position: relative;

width: 0;

height: 0;

border-top: 50px solid black;

border-right: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid transparent;

}

.father2 {

position: absolute;

top: -50px;

left: 50px;

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 50px solid green;

border-left: 50px solid transparent;

}

平形四边形