CSS3特效图标

√

//勾的创建

i{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);}

i:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}

 × 


 //叉的创建 


       a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);} 


  a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);} 


  


  


 //视频播放图标 .course[data-type="2"] { .course__cover { &:before, &:after { content: ''; display: block; position: absolute; left: 5px; bottom: 5px; } &:after { //实现圈圈 width: 20px; height: 20px; border: 2px solid white; background: rgba(0, 0, 0, .6); border-radius: 12px; background-clip: padding-box; } &:before { //实现三角形 height: 0; width: 0; border-left: 8px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 9px; margin-bottom: 7px; z-index: 5; } } } 

转载于:https://www.cnblogs.com/supreme-H/p/7604316.html

原文地址：https://blog.csdn.net/weixin_30730151/article/details/96756855?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-7-96756855-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88