私は、次のレイアウトを達成しようとしている

Question

ダブル斜めの罫線に本部を作成します。

これまで、私は偏っdiv要素を使用しましたが、私はこの結果にこだわっている：

真ん中でスキューを停止する方法はありますし、それがアップ戻って作りますか？
これを間違った方法で実行していますか？

CSSコード私が持っている：あなたのメイン.container追加2つの追加要素インサイド

.slanted { 
    box-sizing: border-box; 
    position: relative; 
} 
.slanted:before, .slanted:after { 
    content: ""; 
    background: white; 
    height: 65px; 
    transform: skewY(2deg); 
    position: absolute; 
    left: 0; 
    right: 0; 
    z-index: 500; 
} 
.slanted:before{  
    top: -30px;  
} 
.slanted:after { 
    bottom: -30px; 
} 

Answer 1

jsBin demo

、
<div class="slant-top"></div>と<div class="slant-bottom"></div>
これらの要素がちょうど者のためにあります:afterと:beforeの場合、-topは「耳」をバルドし、-bottomはそれらの擬似体を「鼻」で構築します。あなたはbrowser supportかなり良いを持っているインラインSVGを使用して、気にしないだろう場合

*{box-sizing:border-box; -webkit-box-sizing:border-box;} 
 
html, body{height:100%; margin:0;} 
 

 
/* COMMONALITIES */ 
 
body{background:#322} 
 
.container{ 
 
    position:relative; 
 
    padding:0 24px; 
 
} 
 
.bg-white{background:#fff;} 
 
.color-white{color:#fff;} 
 
.padd-v-24{padding-top:24px; padding-bottom:24px;} 
 
.padd-v-72{padding-top:72px; padding-bottom:72px;} 
 

 

 
/* SLANTED BORDERS */ 
 
.slant-top:before, 
 
.slant-top:after, 
 
.slant-bottom:before, 
 
.slant-bottom:after{ 
 
    content: ""; 
 
    background: white; 
 
    height: 65px; 
 
    top: -30px; 
 
    width:50%; 
 
    position: absolute; 
 
    z-index:-1; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 
.slant-top:before, 
 
.slant-bottom:before{  
 
    left: 0; 
 
    transform: skewY(2deg); 
 
} 
 
.slant-top:after, 
 
.slant-bottom:after{ 
 
    right: 0; 
 
    transform: skewY(-2deg); 
 
} 
 
.slant-bottom:before, 
 
.slant-bottom:after{ 
 
    top:auto; 
 
    bottom: -30px; 
 
}

<div class="container padd-v-24 bg-white"> 
 
    <div class="slant-top"></div> 
 
    <h1>1 Content goes here</h1> 
 
    <div class="slant-bottom"></div> 
 
</div> 
 

 
<div class="container padd-v-72 color-white"> 
 
    <h1>Me no slant, I has padd ;)</h1> 
 
</div> 
 

 
<div class="container padd-v-24 bg-white"> 
 
    <div class="slant-top"></div> 
 
    <h1>2 Content goes here</h1> 
 
    <div class="slant-bottom"></div> 
 
</div>

Answer 2

、あなたは絶対位置のdivの内側にそれを包むことができます。段落の内部も同様に絶対配置する必要があります。 viewBox属性とpreserveAspectRatio属性をsvgに追加するだけで、ポリゴンのポイントをパーセンテージ値として定義することができます。

ここは例です。

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    background: black; 
 
} 
 

 
.slanted-wrapper { 
 
    position: relative; 
 
    top: 125px; 
 
    height: 320px; 
 
} 
 

 
.slanted, .slanted-wrapper p { 
 
    position: absolute; 
 
    top: -5%; 
 
    width:100%; 
 
    height: inherit; 
 
} 
 

 
.slanted-wrapper p { 
 
    box-sizing: border-box; 
 
    color: gray; 
 
    margin: 0; 
 
    padding: 0 20%; 
 
    text-align: center; 
 
    height: auto; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.slanted svg { 
 
    background-color: transparent; 
 
} 
 

 
.slanted svg .slanted-poly { 
 
    fill: white; 
 
}

<div class="slanted-wrapper"> 
 
    <div class="slanted"> 
 
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <polygon class="slanted-poly" points="50 25, 100 0, 100 75, 50 100, 0 75, 0 0" /> 
 
    </svg> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum porro ut laboriosam, quis odio eos eveniet sapiente quae deserunt? Dolore fugit quaerat iure sequi. Eveniet nisi, quidem dolor molestias est.</p> 
 
</div>

Answer 3

使用background image、linear-gradientとpseudo elementsそれが応答してきれいです。

プレビュー：

デモ：

*{ 
 
box-sizing: border-box 
 
} 
 
body{ 
 
margin:0; 
 
background: rgba(36, 39, 41, 0.14); 
 
} 
 
section{ 
 
padding: 20px; 
 
text-align: center 
 
} 
 
article{ 
 
width: 80vw; 
 
margin: 0 auto; 
 
} 
 

 
.slanted{ 
 
    background: white; 
 
    margin-bottom: 40px; 
 
    position: relative 
 
} 
 
.slanted:before,.slanted:after, 
 
.slanted article:before,.slanted article:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 40px 
 
} 
 
.slanted:before,.slanted:after{ 
 
    top: 100%; 
 
} 
 
.slanted article:before,.slanted article:after{ 
 
    bottom: 100%; 
 
} 
 
.slanted:before{ 
 
    left: 0; 
 
    background-image: linear-gradient(to top right, transparent 50%, white 51%); 
 
} 
 
.slanted:after{ 
 
    right: 0; 
 
    background-image: linear-gradient(to top left, transparent 50%, white 51%); 
 
} 
 
.slanted article:before{ 
 
    left: 0; 
 
    background-image: linear-gradient(to bottom left, transparent 50%, white 51%); 
 
} 
 
.slanted article:after{ 
 
    right: 0; 
 
    background-image: linear-gradient(to bottom right, transparent 50%, white 51%); 
 
}

<section> 
 
    <article> 
 
    <h1>what is lorem ipsum</h1> 
 
    </article> 
 
</section> 
 
<section class=slanted> 
 
    <article> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </article> 
 
</section> 
 
<section> 
 
    <article></article> 
 
</section>