码迷,mamicode.com
首页 > Web开发 > 详细

css3 实现圆角的三角形

时间:2020-06-03 15:37:06      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:实现   segment   需求   data   span   radius   怎么   code   解决问题   

达到的效果:

技术图片

今天碰到这样一个需求,为带有圆角的框加一个角标。而且角标是圆角的。
我真的不想切图,怎么办。突然想到css3可以实现条纹背景,那这不就可以了么

background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;

三行代码解决问题,继续愉快的coding

css3 实现圆角的三角形

标签:实现   segment   需求   data   span   radius   怎么   code   解决问题   

原文地址:https://www.cnblogs.com/jishufashaoyou/p/13037583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!