1.正方形
#targetId{
width: 100px;
height: 100px;
background: orange;
/*同上实现
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: orange;
*/
}
2.长方形
#targetId{
width: 200px;
height: 100px;
background: orange;
/*同上实现
height: 0;
width: 0;
border-width: 50px 100px;
border-style: solid;
border-color: orange;
*/
}
3.圆形
#targetId{
width:100px;
height:100px;
background:orange;
border-radius:50%; /* 水平、垂直半径为宽高的50% */
/* 同上实现
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: orange;
border-radius: 50%;
*/
}
4.椭圆形
#targetId{
width: 200px;
height: 100px;
background: orange;
border-radius: 100px / 50px; /* 表示以水平半径100px 垂直半径50px的椭圆切割 */
/*同上实现
height: 0;
width: 0;
border-width: 50px 100px;
border-style: solid;
border-color: orange;
border-radius: 50%;
*/
}
5.等腰直角三角形
-
5.1直角顶点垂直向上方向
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; */ border: 50px solid; border-color: transparent transparent orange transparent; }
-
加一层遮罩
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; */ border: 50px solid; border-color: transparent transparent orange transparent; position: relative; } #targetId::after{ content: ''; position: absolute; bottom: -55px; left: -50px; border: 50px solid; border-color: transparent transparent white transparent ; }
-
-
5.2直角顶点垂直向下方向
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid orange; */ border: 50px solid; border-color: orange transparent transparent transparent; }
- 加一层遮罩
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid orange; */ border: 50px solid; border-color: orange transparent transparent transparent; position: relative; } #targetId::after{ content: ''; position: absolute; top: -55px; left: -50px; border: 50px solid; border-color: white transparent transparent transparent ; }
- 加一层遮罩
-
5.3直角顶点水平向右方向
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; */ border: 50px solid; border-color: transparent transparent transparent orange ; }
-
加一层遮罩
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-left: 50px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; */ border: 50px solid; border-color: transparent transparent transparent orange ; position: relative; } #targetId::after{ content: ''; position: absolute; left: -55px; top: -50px; border: 50px solid; border-color: transparent transparent transparent white; }
-
-
5.4直角顶点水平向左方向
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-right: 50px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; */ border: 50px solid; border-color: transparent orange transparent transparent; }
- 加一层遮罩
#targetId{ width: 0; height: 0; /* 同下但顶点对外距离为0 border-right: 50px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; */ border: 50px solid; border-color: transparent orange transparent transparent; position: relative; } #targetId::after{ content: ''; position: absolute; right: -55px; top: -50px; border: 50px solid; border-color: transparent white transparent transparent ; }
- 加一层遮罩
-
5.5 直角顶点向左上方向
#targetId{ width: 0; height: 0; border-left: 50px solid orange; border-bottom: 50px solid transparent; }
-
5.6 直角顶点向右上方向
#targetId{ width: 0; height: 0; border-right: 50px solid orange; border-bottom: 50px solid transparent; }
-
5.7 直角顶点向左下方向
#targetId{ width: 0; height: 0; border-left: 50px solid orange; border-top: 50px solid transparent; }
-
5.8 直角顶点向右下方向
#targetId{ width: 0; height: 0; border-right: 50px solid orange; border-top: 50px solid transparent; }
6.等腰梯形
#targetId{
border-bottom: 100px solid orange;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
7.平行四边形
#targetId{
width: 150px;
height: 100px;
transform: skew(20deg);/* 倾斜20° */
background: orange;
}
8.六角星
#targetId {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid orange;
position: relative;
}
#targetId:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid orange;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
9.五星级
#targetId {
margin: 100px 0;
position: relative;
display: block;
color: orange;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid orange;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#targetId:before {
border-bottom: 80px solid orange;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#targetId:after {
position: absolute;
display: block;
color: orange;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid orange;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
10.正五边形
#targetId{
margin-top: 50px;
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: orange transparent;
}
#targetId:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent orange;
}
11.正六边形
#targetId {
margin-top: 50px;
width: 100px;
height: 55px;
background: orange;
position: relative;
}
#targetId:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid orange;
}
#targetId:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid orange;
}
12.正八边形
#targetId{
width: 100px;
height: 100px;
background: orange;
position: relative;
}
#targetId:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid orange;
border-left: 29px solid #FFFFFF;
border-right: 29px solid #FFFFFF;
width: 42px;
height: 0;
}
#targetId:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid orange;
border-left: 29px solid #FFFFFF;
border-right: 29px solid #FFFFFF;
width: 42px;
height: 0;
}
13.心形
#targetId {
position: relative;
width: 100px;
height: 90px;
}
#targetId:before,
#targetId:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: orange;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#targetId:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
14.扇形
#targetId {
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: transparent orange transparent transparent;
border-radius: 50%;
}