Html 取消/交叉的CSS设计

我正在尝试设计以下图像

以下是我迄今为止的尝试，但我只是无法让内容“x”到达div的四个角

HTML

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

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

---

您正在查找Unicode字符“乘法符号”。也许有一个更优雅的解决方案。这应该行得通

HTML

---

我会使用一点

比例

和一个伪元素：

或者没有任何字体和对外观的完全控制：

---

这里我们创建两个伪元素（

：before

和

：after

），它们都是矩形，宽度都是父元素的110%，高度只有几个像素。然后，通过绝对定位和

变换：translate

将它们水平和垂直居中于父对象内部。最后一步是使其中一个旋转45度，另一个旋转相同但方向相反。这将使它们形成一个十字-元素的宽度越大，它们就越接近父元素的角（在141%时，它们将完全接触，因为这是对角线的长度，而不是宽度）.

我可能建议使用svg之类的图像文件，以便在所有浏览器中获得一致的外观。如果使用诸如“X”或乘法符号之类的文本，如果用户没有安装与您相同的字体，则可能会得到意外的结果

下面是一个实时示例，介绍如何使用内嵌svg。当然，如果要重复使用图标，应使用带有外部

.svg

文件的

img

标记：

屏幕截图：

演示：

#容器{
宽度：50px；
高度：50px；
背景颜色：灰色；
}

---

我喜欢svg解决方案，因为它可以很好地扩展，但是如果您想要一个只使用CSS的解决方案，您可以通过这样做实现“类似”的效果：

• 创建长方体并为其指定相对位置
• 使用伪元素

  ：：before

  和

  ：：after

  创建X（通过绝对定位它们，使用上边框，并将它们旋转45度和-45度）

下面是一个关于如何执行此操作的示例：

。取消{
位置：相对位置；
宽度：100px；
高度：100px；
背景：#d0；
}
.cancel:：之前，.cancel:：之后{
内容：“；
位置：绝对位置；
顶部：计算值（50%-5px）；
左：0px；
宽度：100%；
边框顶部：10px纯白；
变换：旋转（45度）；
变换原点：50%50%；
}
.取消：：之后{
变换：旋转（-45度）；
}

---

不确定这是否是您正在寻找的内容-但也许可以尝试一个没有“X”内容的CSS解决方案？这个解决方案是由四个div构建的，它们在CSS边框的帮助下都是三角形。根据你如何定位三角形，你的“X”在中间可以像你所喜欢的那样薄或厚，而“X”会一直延伸到角落。我所发布的内容中的定位并不是非常优雅，但是你可以使用浮动和填充来解决这个问题。我希望这有帮助

HTML:

---

这是一个非常整洁和漂亮的解决方案，我喜欢它，但我现在的目标是使用css：）你能为第二个演示提供一个解释吗，thanksperfect thanks@shikkediel，他试图理解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;
}

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

.close {
    height: 100px;
    width: 100px;
    background-color: #2980b9;
    border-radius: 5px;
}
.close:after {
    position:relative;
    content:"\d7";
    font-size:235px;
    color:white; /* #c0392b; */
    font-weight:bold;
    top:-100px;
    left:-24px
}

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

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

 <div class="crossBox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
 </div>

.crossBox div {
    display: inline-block;
}
.crossBox div:first-child {
    width: 0;
    height: 0;
    border-top: 58px solid blue;
    border-left: 58px solid transparent;
    border-right: 58px solid transparent;
    background-color: transparent;
    border-bottom: none;
    position: relative;
    top: -34px;
    left: 5px;  
}
.crossBox div:nth-child(2) {
    width: 0;
    height: 0;
    border-left: 58px solid blue;
    border-top: 58px solid transparent;
    border-bottom: 58px solid transparent;
    background-color: transparent;
    border-right: none;
    position: relative;
    left: -118px;
    top: 30px;
}
.crossBox div:nth-child(3) {
    width: 0;
    height: 0;
    border-right: 58px solid blue;
    border-top: 58px solid transparent;
    border-bottom: 58px solid transparent;
    background-color: transparent;
    border-left: none;
    position: relative;
    left: -116px;
    top: 30px;
}
.crossBox div:nth-child(4) {
    width: 0;
    height: 0;
    border-bottom: 58px solid blue;
    border-left: 58px solid transparent;
    border-right: 58px solid transparent;
    background-color: transparent;
    border-top: none;
    position: relative;
    top: 36px;
    left: -239px;  
}