css右上角叉按钮

CSS的右上角叉按钮是网页中常见的一个功能，一般用于关闭某个窗口或弹窗。下面我们来看看如何用CSS实现这个功能。

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .close:before,.close:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 20px;
    background-color: #000;
  }
  .close:before {
    transform: rotate(45deg);
  }
  .close:after {
    transform: rotate(-45deg);
  }

在上面的代码中，我们首先给叉按钮加上了一个class名为“close”，并设置其为绝对定位。然后通过top和right属性将其定位在右上角。

接下来，我们设置按钮的宽度和高度，并给其加上一个cursor属性，用于指定鼠标悬浮在按钮上时的鼠标样式。

紧接着，我们通过伪元素:before和:after给按钮添加上了两根竖直的线。这两根线的宽度为2px，高度为20px，并且背景颜色为黑色。

最后，我们通过transform属性对:before和:after伪元素进行了旋转，形成了叉的形状，从而实现了按钮的功能。