如何使用纯CSS创建一个十字架

Question

如何在包含图像的div中创建一个交叉(x)？ 交叉还必须重叠在图像上，是否可以纯粹使用CSS来实现，还是我必须创建一个带有交叉的新图像？

- user2843341

---

是的，这是可能的 - 实际上相当容易。可以通过几种不同的方式实现。 - Josh Crozier

我在问题中指定了它，交叉（x）。 - user2843341

我可能有所遗漏，或者一些UTF-8字符就可以胜任这项工作？例如 ✕ (U+2715)，✗ (U+2717) 或 ✘ (U+2718)。 - Guillaume Poussel

如果您正在尝试给图像加水印，请注意此方法不具备安全性。 - David Thomas

Answer 1

CSS-

#cross {
   width: 100px;
   height: 100px;
   position: relative;
  transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
}

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d00;
}

#cross:before {
  left: 50%;
  width: 30%;
  margin-left: -15%;
  height: 100%;
}

#cross:after {
  top: 50%;
  height: 30%;
  margin-top: -15%;
  width: 100%;
}

演示

实现方法：

步骤：

创建一个简单的正方形，不添加任何背景颜色。

 #cross {
       width: 100px;
       height: 100px;
       position: relative;
    }

第二步 -

`CSS gives you compatibility to play with sudo-elements`.

CSS中每个元素都有内容空间。

示例 - 在before和after伪元素中添加内容

第三步 - 通过将这些before和after元素position:absolute与相对父元素对齐，您可以获得所需的形状。

最后一步 - 按您想要的方式进行旋转变换。 例如-

使用CSS进行变换

顺便说一下@Adam的做法很聪明，曾经是我首选的方法。

- Manoz

---

感谢替换，那兼容性方面呢？ - user2843341

你很棒，直接从https://dev59.com/rmQm5IYBdhLWcg3wwxPF复制答案。 - Josh Crozier

嘿，Manoz，我真的很喜欢你实现这个的方式，请问你能解释一下吗？我想学习每个CSS属性如何起作用...谢谢！ - Sagar Guhe

这太过复杂了。为什么不直接使用UTF-8字符呢？http://jsfiddle.net/mpaQS/ - Adam Jenkins

@Adam，使用完整的CSS可以更好地控制视图。但在这种情况下，UTF-8与CSS一样有用 :p - nkmol

Answer 2

你们过于复杂化答案了。使用一个简单的×符号 - 100%跨浏览器，不需要转换/伪元素。

http://jsfiddle.net/mpaQS/

编辑

我意识到你可能也不理解相对/绝对定位的概念。

您的容器需要相对定位，您的“X”需要绝对定位。像下面的小提琴一样:

http://jsfiddle.net/wVdvu/

- Adam

Answer 3

如果我是你，我会选择简单的解决方案，只需在一个 div 中放置一个 X，并将该 div 设为背景图像。

http://jsfiddle.net/vGqDJ/

.image {
background-image: url('http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg');
background-size: cover;
text-align: center;
font-family: sans-serif;
}

- russtuck91

---

同意，但我可能会选择乘号（×） - 大多数字体中更像删除。 - Adam Jenkins

如果图像不是背景图像而是HTML元素呢？ - user2843341

就是这样，您需要将img更改为带有背景图像的元素http://jsfiddle.net/vGqDJ/2/。 - russtuck91