如何用CSS绘制各种各样的形状( 三 ) _浏览器（IE、火狐、谷歌等）

文章插图

12三角形
.lf-regular-triangle,
.rt-regular-triangle,
.bot-regular-triangle,
.top-regular-triangle {
width: 0;
height: 0;
border: 30px solid transparent;
}
.lf-regular-triangle {
border-left-color: #EC0465;
}
.rt-regular-triangle {
border-right-color: #EC0465;
}
.bot-regular-triangle {
border-bottom-color: #EC0465;
}
.top-regular-triangle {
border-top-color: #EC0465;
}

文章插图

13.triangle-bot1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid #EC0465;
}
.triangle-top1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 60px solid #EC0465;
}

文章插图

14/* 直角三角形 */
.toplf-triangle {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-right: 100px solid transparent;
}
.rtbot-triangle {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-left: 100px solid transparent;
}
.lfbot-triangle {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-right: 100px solid transparent;
}
.toprt-triangle {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-left: 100px solid transparent;
}

文章插图

15.toplf-triangle1 {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-right: 50px solid transparent;
}
.lfbot-triangle1 {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-right: 50px solid transparent;
}
.lfbot-triangle2 {
width: 0;
height: 0;
border-bottom: 50px solid #EC0465;
border-right: 100px solid transparent;
}
.toplf-triangle2 {
width: 0;
height: 0;
border-top: 50px solid #EC0465;
border-right: 100px solid transparent;
}

文章插图

16平行四边形
.pxsbx1 {
width: 160px;
height: 100px;
background: #EC0465;
transform: skew(30deg);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
}
.pxsbx2 {
width: 160px;
height: 100px;
background: #EC0465;
transform: skew(-25deg);
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
【如何用CSS绘制各种各样的形状】}