纯CSS实现基本图形:圆形、三角形、多边形、爱心、八卦等

2017年02月10日 307点热度 0人点赞 0条评论

纯CSS实现基本图形

圆形CSS代码如下:


#circle {
     width: 100px;
     height: 100px;
     background: #f60;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
 }

最终效果如下

 

椭圆CSS代码如下:


#oval {
     width: 200px;
     height: 100px;
     background: #f60;
     -moz-border-radius: 100px / 50px;
     -webkit-border-radius: 100px / 50px;
     border-radius: 100px / 50px;
}

最终效果如下

 

三角CSS代码如下:

上尖角三角形


#triangle-up {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid #f60;
}

最终效果如下

 

下尖角三角形


#triangle-left {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid #f60;
}

最终效果如下

 

左尖角三角形


#triangle-left {
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 100px solid #f60;
     border-bottom: 50px solid transparent;
}

最终效果如下

 

右尖角三角形


#triangle-right {
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-left: 100px solid #f60;
     border-bottom: 50px solid transparent;
}

最终效果如下

 

更多图形样式,请点击这里

Chi

互联网折腾者

文章评论

您需要 登录 之后才可以评论