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