css - CSS で十字形を作成する

Question

それは可能ですか、私はこのリンクで次のすべての形状が可能であることを知っています:

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

しかし、クロスも可能でなければなりません。クロスと言うときは、次のような意味です。

Answer 1

ここに表示されるすべての回答は、長すぎるか、ベンダー プレフィックスに依存しているように見えるため、

#cross { 
  background: red; 
  height: 100px; 
  position: relative; 
  left: 50px;
  width: 20px; 
} 
#cross:after { 
  background: red; 
  content: ""; 
  height: 20px; 
  left: -40px; 
  position: absolute; 
  top: 40px; 
  width: 100px; 
}

<div id="cross"></div>

Answer 2

これは、通常の「+」プラス文字とtext-stroke

デモ( Webkit、Android のみ)

div {
  font-size: 80px;
  -webkit-text-stroke: 20px red;
  display: inline-block;
  padding: 0 20px;
}

<div>+</div>

Answer 3

CSS Transform を使用して簡単にプラスの形状を実現できます

.close {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 20px;
  height: 20px;
  opacity: 0.3;
}
.cross:before, .cross:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 21px;
  width: 2px;
  background-color: #333;
}
.cross:before {
  transform: rotate(0deg);
}
.cross:after {
  transform: rotate(-90deg);
}