1

私はCSSに非常に精通していますが、一生これを理解することはできません.

プロジェクトのために純粋な CSS で (可能であれば) 多数の形状を再作成する必要があります。さらに難しいのは、背景画像を使用するための形状が必要なことです。傾斜、変換、回転などの多数の CSS3 プロパティを試しましたが、これまでのところ機能していません。スキューは私を最も近くに連れて行きましたが、背景とそのコンテンツは歪んでいます。div 内に画像を設定して、画像をまっすぐにする div の傾きと反対のプロパティを指定しようとしましたが、画像を正しく配置できませんでした。

とにかくCSSを使用してこれを再現することは可能ですか?

ここに画像の説明を入力

誰かが使用する適切なプロパティを見つけるのを手伝ってくれたとしても、それがどのように行われるかを調べることができれば助かります.

前もって感謝します。

4

2 に答える 2

3

これは作るのが難しい形。を使用してこの形状を作成できますclip-pathが、残念ながら、このプロパティのサポートは驚くべきものではありません。

サポートはこちらをご覧ください。

次に、背景付きの形状の例を示します。

.shape {
  width: 400px;
  height: 400px;
  background: #000;
  -webkit-clip-path: polygon(24% 0, 100% 20%, 100% 100%, 0 40%);
  clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%);
  background-image: url(http://p1.pichost.me/640/39/1629941.jpg);
  background-size: cover;
}
<div class="shape"></div>

于 2015-05-01T14:33:00.667 に答える
1

これによりダイヤモンドが得られるので、微調整して形状を取得できます。

#diamond-narrow {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid red;
    position: relative;
    top: -50px;
}
#diamond-narrow:after {
    content: '';
    position: absolute;
    left: -50px; top: 70px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
}

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

于 2013-03-06T10:07:59.210 に答える