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

更新时间：2018-10-06 分类：设计主题 浏览量：1444

纯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;
}

最终效果如下

 

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

标签：