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

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

最终效果如下

 

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

腾讯云高性能云服务器

相关推荐

发表评论

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

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

显示

忘记密码?

显示

显示

获取验证码

Close