如何用纯css创建一个十字架

Question

如何在div中创建一个十字架(x)来构图？十字架也必须与图像重叠,可以在纯css中进行,还是必须用十字架创建一个新图像？

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中的每个元素都有内容空间.

示例 - 在sudo-element之后添加

第三步 - 通过将元素之前的元素position:absolute与相对父元素对齐,可以得到形状.

最后一步 - 变换按您想要的方式旋转它.一个例子-

转换为CSS

顺便说一下,@ Adam这样做的方式很聪明,而且曾经是我的首选.

Answer 2

你们这些人都在思考答案.使用简单的×符号 - 100%跨浏览器,不需要转换/伪元素.

http://jsfiddle.net/mpaQS/

编辑

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

你的容器需要相对定位,而你的"X"必须绝对定位.像下面的小提琴:

http://jsfiddle.net/wVdvu/

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