html - 純粋な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 要素の前に追加する

3番目のステップ-これらの前後の要素position:absoluteを相対的な親に揃えることで、形状を取得します。

最後のステップ - 変換して、好きなように回転させます。例-

cssで変換

ところで、これを行う@Adamの方法は巧妙で、かつて私に好まれていました。

Answer 2

あなた方は答えを考えすぎています。シンプルな×シンボルを使用 - 100% クロス ブラウザー、変換/疑似要素は必要ありません。

http://jsfiddle.net/mpaQS/

編集

相対/絶対配置の概念も理解していないかもしれません。

コンテナは相対的に配置する必要があり、「X」は絶対的に配置する必要があります。次のフィドルのように：

http://jsfiddle.net/wVdvu/