css 实现叉号

2024-02-08 17:31| 来源: 网络整理| 查看: 265

css 实现叉号有很多种方式，大多都是利用 border; 今天分享一组实现方式如下：

close { position: relative; } .close::before, .close::after { position: absolute; content: ' '; background-color: #eee; left: 20px; width: 1px; height: 20px; } .close::before { transform: rotate(45deg); } .close::after { transform: rotate(-45deg); }

利用伪类创建两个宽度为1px的长方形，然后，分别旋转这两长方形，形成一个叉号。

带圆圈的叉号

分析：还是使用伪类通过border+旋转实现叉号，然后设置该元素相对于圆圈元素的定位。主要是要设置好定位，伪类元素是相对于元素定位的，而元素是相对于圆圈定位的

.delWrapper{ position: relative; width: 20px; height: 20px; top: 24px; right: 20px; } .del{ position: absolute; width:20px; height: 20px; border: 1px solid; border-radius: 20px; } .del::before,.del::after { position: absolute; content: ' '; background-color: #898989; width: 0px; height: 13px; border:1px solid; left: 9px; top: 2px; } .del::before { transform: rotate(45deg); } .del::after { transform: rotate(-45deg); }

【本文地址】

css 实现叉号

css 实现叉号

今日新闻

推荐新闻