整理一下css实现常用图形
1.正方形
{
width: 200px;
height: 100px;
background: red;
}
2.长方形
{
width: 200px;
height: 100px;
background: red;
}
3.圆
{
width:100px;
height:100px;
background:red;
border-radius:50%; /* 水平、垂直半径为宽高的50% */
}
4.椭圆
{
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px; /* 表示以水平半径100px 垂直半径50px的椭圆切割 */
}
5.三角形(上)
{
width: 0;
height: 0;
/* border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red; */
border: 50px solid;
border-color: transparent transparent red transparent;
}
6.三角形(下)
{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
7.三角箭头(左)
.arrow_left{
width: 0;
height: 0;
border: 50px solid;
border-color: transparent red transparent transparent;
position: relative;
}
.arrow_left::after{
content: '';
position: absolute;
right: -55px;
bottom: -50px;
border: 50px solid;
border-color: transparent white transparent transparent;
}
8.三角箭头(右)
.arrow_right{
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent transparent red ;
position: relative;
}
.arrow_right::after{
content: '';
position: absolute;
left: -55px;
bottom: -50px;
border: 50px solid;
border-color: transparent transparent transparent white ;
}
9.三角形(左上)
{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
10.三角形(右上)
{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
11.三角形(右下)
{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
12.三角形(左下)
{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
13.梯形
{
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
14.平行四边形
{
width: 150px;
height: 100px;
transform: skew(20deg);/* 倾斜20° */
background: red;
}
15.六角星
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}