html - 取消/交叉的 CSS 设计

Question

我正在尝试设计以下图像

到目前为止，以下是我的尝试，但我无法让内容“x”到达 div 的四个 Angular 。

HTML

<div id="cancel">X</div>

CSS

#cancel{
    float: right;
    border: 1px solid yellow;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: lighter;
    font-size: 3em;
    width: 10%;
    text-align: center;
    background-color: #d5d6da;
    color: white;
    width: 12%;
    cursor: pointer;
}

下图是到目前为止我要达到的输出

Answer 1

我会使用一些scale - 和一个伪元素:

Example

#cancel {
  width: 0.9em;
  height: 0.9em;
  position: relative;
  font-family: helvetica, arial, sans-serif;
  font-weight: lighter;
  font-size: 3em;
  color: white;
  background-color: #d5d6da;
  cursor: pointer;
}

#cancel:after {
  content: 'X';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) scaleX(1.2);
  transform: translate(-50%,-50%) scaleX(1.2);
}

或者不使用任何字体并完全控制它的外观:

Demo

#cancel {
  width: 40px;
  height: 40px;
  position: relative;
  background-color: #d5d6da;
  cursor: pointer;
}

#cancel:before, #cancel:after {
  content: '';
  width: 110%;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
}

#cancel:before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
}

#cancel:after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg);
}

这里我们创建了两个伪元素(:before 和 :after)，它们都是矩形，宽度均为父元素的 110%，高度为几个像素。然后，它们通过绝对定位和 transform:translate 在父级内部水平和垂直居中。最后一步是将一个旋转 45 度，另一个旋转相同的 Angular ，但方向相反。这将使它们形成一个十字 - 元素的宽度越大，它们就越接近父级的 Angular (在 141% 时，它们将完全接触，因为这是对 Angular 线的长度与宽度的比较) .