在CSS中创建十字形 [英] Create a cross shape in CSS

问题描述

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

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

交叉的大小将按比例缩放，根据<$ c $元素的 width 和 height b

---

更新：另一个解决方案（使用更少的代码）可以简单地涉及多个线性梯度（没有假设），例如

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（向右，透明35％，
＃d00 35％，
＃d00 65％，
 transparent 65％），
} 
  

IS it possible, I know all the following shapes are possible in this link:

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

but cross must be possible too. When I say cross I mean like this:

解决方案

You could achieve something like this with pseudoelements only:

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

The size of the cross will proportionally scale, according to the width and height of the #cross element

---

Update: another solution (using less code) could simply involve multiple linear-gradients (without pseudolements) e.g.

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, transparent 35%, 
                                         #d00 35%, 
                                         #d00 65%,  
                                         transparent 65%),
}

这篇关于在CSS中创建十字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！