1.圆形
原理:上下左右都是圆角且为宽高一半
.circle{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
2.椭圆形
原理:块级元素为宽高比为2:1的矩形,border-radius为宽度的一半除以高度的一半
.oval{
width: 200px;
height: 100px;
background-color: green;
border-radius: 100px/50px;
}
3.三角形
原理:块级元素不设置宽高,border设置左右下为透明即可
.Triangle{
width: 0px;
height: 0px;
border-top: 100px solid yellow;
border-bottom: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
4.菱形
原理:块元素为正方形,以左下角为基准点逆时针旋转45度
.dismond{
width: 100px;
height: 100px;
background-color: pink;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
5.梯形
原理:设置宽度不设置高度,将左右边框设置成下边框的一半,并透明显示
.Trapezium{
width: 100px;
height: 0;
border-bottom: 100px solid gray;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
6.双三角
原理:两个块元素实现三角形,但是不能设置左边框,否则两个三角形之间会有间隔
.Triangle1,.Triangle2{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 50px solid red;
float: left;
}
7.平行四边形
原理:倾斜函数的使用,一个参数时代表水平方向倾斜角度,两个参数时一个代表水平方向倾斜角度,一个代表垂直方向倾斜参数
.Parallelogram{
width: 100px;
height: 100px;
background-color: #ccc;
transform: skew(160deg);
}
8.五边形
原理:可以分为两部分,上边是梯形,下边是三角形
.Pentagon1{
width: 100px;
height: 100px;
border-bottom: 50px solid purple;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.Pentagon2{
width: 0;
height: 0;
border-bottom: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid red;
}
9.半圆
原理:设置border-radius上和右为宽度一半
.Semicircle{
width: 100px;
height: 50px;
background-color: green;
border-radius: 50px 50px 0 0;
}
10.扇形
原理:由两部分组成,上边为半圆,下边为三角形
.Sector1{
width: 100px;
height: 50px;
background-color: orange;
border-radius: 50px 50px 0 0;
}
.Sector2{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid orange;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}