css如何实现徽章丝带图形
这篇文章主要介绍了css如何实现徽章丝带图形,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联专注于企业成都全网营销推广、网站重做改版、南江网站定制设计、自适应品牌网站建设、HTML5、成都做商城网站、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为南江等各大城市提供网站开发制作服务。
徽章丝带
#badge-ribbon { position: relative; background: red; height: 100px; width: 100px; border-radius: 50px; } #badge-ribbon:before, #badge-ribbon:after { content: ''; position: absolute; border-bottom: 70px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left: -10px; transform: rotate(-140deg); } #badge-ribbon:after { left: auto; right: -10px; transform: rotate(140deg); }
感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现徽章丝带图形”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章题目:css如何实现徽章丝带图形
文章链接:http://scyanting.com/article/jhoopg.html