7

私はウェブサイトを構築しています、それはこのようなものになります 拡張なし

上部の 2 つの構造は静的で、下部の 4 つは動的です。動的とは、拡張可能であることを意味します。次のようなものです。

拡張あり

色、形、影だけなので、CSS3で作れると思います。しかし、私はそうするのに苦労しています。CSSHat も使ってみたのですが、ひどい結果です。

これは例の形状です 個性的な形

生成されたコードは次のとおりです。

width: 1920px;
height: 341px;
-moz-border-radius: 0 1920px 1920px / 0 181px 56px;
-webkit-border-radius: 0 1920px 1920px / 0 181px 56px;
border-radius: 0 1920px 1920px / 0 181px 56px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #3b0f1d; /* layer fill content */

結果は次のように なります。実際変換された形状 の例は、http://codepen.io/seraphzz/pen/mgDwdにあります。

この目標を達成するための最良の方法はどれですか?

4

4 に答える 4

1

CSS 変換( on :before/ :afterelements ) を使用して効果をシミュレートできます。

のようなもの ( http://codepen.io/gpetrioli/pen/LHbIEのデモ)

<div class="background">
    <div class="shape"></div>
</div>

と

background{background-color: #3c101d}
.shape{
  width: 800px;
  height: 341px;
  background: white;
  display: block;
  margin:10px;
  position:relative;
  overflow:hidden;
}
.shape:before{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  top:0;
  left:0;
  transform-origin:0 100%;
  transform: translateY(-100px) rotate(5deg);
}
.shape:after{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  bottom:0;
  left:0;
  transform-origin:0 0;
  transform: translateY(100px) rotate(-2deg);
}

注意: このコードは標準の CSS プロパティを使用しています。必要に応じて、ベンダーの接頭辞を追加します

于 2013-05-29T12:31:32.170 に答える
1

それらの形は、私には遠近法変換のように見えます。http://css-tricks.com/almanac/properties/p/perspective/オレンジ色のセクションのオーバーフローが隠されている親よりも左右を広くするという極端に行くジェネレーターがあるとは思わない2番目のグラフィックの。

回転している間、このパースペクティブ ジェネレーターから、すべての角度が可能であることがわかります。http://desandro.github.io/3dtransforms/examples/perspective-03.html

画像も必要としない CSS3 の代替マークアップとして

SVG を使用してすべてのポリゴンをマークアップすることをお勧めします。これははるかに簡単で、すべての CSS3 ブラウザーでサポートされています。

于 2013-11-13T19:18:43.113 に答える