在CSS中创建十字形

这是可能的,我知道以下所有形状都可以在这个链接中：

http://css-tricks.com/examples/ShapesOfCSS/

但是交叉也是可能的.当我说十字架我的意思是这样的：

解决方法

您可以使用只有伪元素的方式来实现：

http://jsbin.com/upiyoc/1/edit

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

#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元素的宽度和高度,十字架的大小将按比例缩放

更新：另一个解决方案(使用较少的代码)可以简单地涉及多个线性梯度(无假设).

http://codepen.io/anon/pen/zxwgPo

#cross {
  width: 100px;
  height: 100px;

  background: linear-gradient(to bottom,transparent 35%,#d00 35%,#d00 65%,transparent 65%),linear-gradient(to right,}

原文地址：https://www.jb51.cc/css/216611.html