CSS 实现叉号

最新推荐文章于 2024-05-07 18:03:31 发布

guoxu0416

最新推荐文章于 2024-05-07 18:03:31 发布

阅读量3.6k

点赞数 2

分类专栏： CSS 文章标签： css guoxu0416

本文链接：https://blog.csdn.net/weixin_43971228/article/details/126492595

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 实现叉号

一、普通叉号

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

HTML部分

<div class="close"></div>

CSS部分

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

二、带圆圈的叉号

HTML部分

<div className='closeWrapper'>
	<div className='close'></div>
</div>

CSS部分

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

.close::after {
    transform: rotate(-45deg);
}