divの形状を変更するには

CSSを使ってdivの形状をどのように変更するのかと思いました。私はそれについていくつかの研究を行い、「スキュー」オプションについて知っていましたが、私が見てきた例はどれも私が探している形を与えていません。ここに私が探しているもののイメージがあります。divの形状を変更するには

出典

2017-01-18 name234

の例はどのようにお見せすることがありますあなたのニーズに合わせて調整することができます。それはコピーして貼り付けるのではなく、新しいことを学ぶ方法です。 –

さまざまなアプローチがあり、CSSを学習することがあなた自身で試してみることができます。だから私は、これらのリソースを見てお勧め以下のアプローチを見てみたの前に：

.pattern-column { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: darkgrey; 
 
    width: 60px; 
 
} 
 
.pattern-column div { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-right: 100px solid darkgrey; 
 
    border-bottom: 50px solid transparent; 
 
    margin-left: -40px; 
 
    margin-top: -30px; 
 
} 
 
.pattern-column div:nth-child(2n) { 
 
    border-left: 100px solid grey; 
 
    border-right: 0; 
 
    margin-left: 0; 
 
} 
 
.pattern-column div:nth-child(3n) { 
 
    border-right-color: #ccc;  
 
    border-left-color: #ccc; 
 
}

<div class="pattern-column"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

出典

2017-01-18 19:58:35 Marvin

私はそれらのリンクを見て、私がそれらについて知っているより多くの可能性が高いそれらを使用します。コードは私が探していたものでもありましたので、ちょっと微調整すれば、動作させることができます。応答していただきありがとうございます。 – name234

1つの質問、それは非常に簡単な答えかもしれませんが、ブラウザウィンドウ全体を埋めるように、どのようにスケールアップするのですか？ – name234

正しい方向に進むにはしばらく時間がかかりましたが、完璧に作業するのはかなり時間がかかり、思ったほど簡単ではないようです。これは私が思いついたことです：[JSFiddle]（https://jsfiddle.net/Lcye6eyv/）。上記のような三角形を使うことは、border-widthをパーセンテージの幅に設定することができないため、次に行く方法ではありません。とにかく私の試みがあなたを助けることを望みます。さもなければ、繰り返しの背景イメージを使用することを考えることができます。 – Marvin

それはピクセル完璧であれば、私は位置にコンテナを作成します：相対幅と高さを定義し、オーバーフローに設定します。隠されました。次に、内部に含まれる3つのdivを作成し、position：absoluteの各項目に対してtransform：rotate（XXdeg）を使用し、それに応じてz-インデックスを作成して、それに応じてオーバーレイします。それを行ってください。

出典

2017-01-18 19:48:55 Adrianopolis

divの形状を変更するには

答えて

関連する問題