divの前のCSS形状

divの前に不規則な形状を追加する際に問題があります。divの前のCSS形状

私は、この画像のような効果を取得する必要があります：

CSS shape before div

しかし、私は、全体のコンテンツのdivのためにこの効果を取得する必要があります。左または底だけでなく。私は境界線で作られたCSSの矢印を適応しようとしましたが、それは私に正しい効果を与えません。

は、それが透明色と::before、::after擬似要素、またはbackground-clip財産の組み合わせで国境を使用することをお勧めします。

私のHTML構造

.wrapper::before { 
 
    display: block; 
 
    height: 0px; 
 
    width: 0px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 650px solid transparent; 
 
    border-bottom: 50px solid black; 
 
} 
 
.content { 
 
    background-color: #f2f2f2; 
 
    box-sizing: border-box; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    Content 
 
    </div> 
 
</div>

全体のdivにこの効果を追加する::afterと::before pseudoelementsを結合する方法はありますか？

出典

2016-06-01 housesoul

これは不規則な形状のため、これは扱いにくくなる可能性があります。おそらくborder-imageは簡単な解決策になります。青の背景が矩形に基づいている場合は、スキューと回転の変換を使用して1つの擬似要素で簡単に行うことができます。

.wrapper { 
 
    padding: 50px; 
 
    position: relative; 
 
} 
 
.content { 
 
    background-color: #f2f2f2; 
 
    box-sizing: border-box; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    z-index: 3; 
 
    text-align: center; 
 
    line-height: 200px; 
 
} 
 
.wrapper::before { 
 
    content: ''; 
 
    display: block; 
 
    background: rgb(145,205,239); 
 
    width: 330px; 
 
    height: 230px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    margin: -15px; 
 
    transform: rotate(-1deg) skew(-5deg, -3deg); 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
CONTENT 
 
    </div> 
 
</div>

出典

2016-06-01 07:44:43 Paul

これは同じではありません。 Unfortunatelly –

私はこれが長方形の背景の単なる例であると言いました。 OPの要件は何ですか？適用する必要がある特定の角度または形状定義がありますか？ – Paul

青色のボックスがはっきりと歪んでいます。もう一つの答えにはもっとアプローチがあります。 –

私はあなたがカスタムそれとあなたのコードを適用することができ、レイアウトのための例があります。

.content { 
 
    background-color: #f2f2f2; 
 
    box-sizing: border-box; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: skew(3deg, 5deg); 
 
    -webkit-transform: skew(3deg, 5deg); 
 
    -moz-transform: skew(3deg, 5deg); 
 
    -o-transform: skew(3deg, 5deg); 
 
    -ms-transform: skew(3deg, 5deg); 
 
    position: relative; 
 
} 
 
.wrapper { 
 
    width: 400px; 
 
    height: 222px; 
 
    margin: 50px; 
 
    padding: 25px 10px; 
 
    background-color: blue; 
 
    transform: skew(-3deg, -5deg); 
 
    -webkit-transform: skew(-3deg, -5deg); 
 
    -moz-transform: skew(-3deg, -5deg); 
 
    -o-transform: skew(-3deg, -5deg); 
 
    -ms-transform: skew(-3deg, -5deg); 
 
    box-sizing: border-box; 
 
} 
 
.content-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Title Page</title> 
 
    </head> 
 
    <body> 
 
    <div class="wrapper"> 
 
     <div class="content"> 
 
     <p class="content-text">Content</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-06-01 08:10:59 TOM

'skew'はもっと意味がありますが、OPと同じ結果が得られません。もっと努力すれば、正確で完璧な答えを加えることができます:) –

ありがとう。それだけの例ですが、カスタムが必要です。 – TOM

<div class="wrapper">この作業は必要ありません。
私はtransform: scale(1.1, 1.18) skew(-4deg,-1.5deg)を使用しました。

.content { 
 
    background-color: #f2f2f2; 
 
    color: #000; 
 
    font-family: Impact, "Trebuchet MS", sans-serif; 
 
    text-transform: uppercase; 
 

 
    float: left; 
 
    margin: 40px; 
 
    position: relative; 
 

 
    width: 360px; 
 
    height: 180px; 
 
    line-height: 180px; 
 
    text-align: center; 
 
} 
 

 
.content::before { 
 
    content: ''; 
 
    background: #91cdef; 
 
    display: block; 
 
    width: 360px; 
 
    height: 180px; 
 

 
    position: absolute; 
 
    transform: scale(1.1, 1.18) skew(-4deg,-1.5deg); 
 
    z-index: -1; 
 
} 
 

 
img { 
 
    float: left; 
 
    margin: 19px; 
 
}

<div class="content">Content</div> 
 
<div class="content">Content</div> 
 
<div class="content">Content</div> 
 
<div class="content">Content</div> 
 

 
<img src="http://i.stack.imgur.com/9vJ92.png" alt="">

出典

2016-06-01 08:52:56

レイヤーモデルが負のz-インデックス要素をブロック要素に戻すため、負のz-インデックスに注意してください。 –

Thx Glebでも、まだ普通の形です。角度は異なるコーナーである必要があります（羊の各コーナーは、不規則な形状を作るために特定の角度を持つ必要があります）。 clip-path：ポリゴンで仕事をするhttp://codepen.io/michal_t/pen/dXPzRJ – housesoul

答えて

関連する問題