css skewの使い方

どうすればいいですか？css skewの使い方

私はそれが絵であると同じことをやろうとしていますが、それは、今取り組んでいます。私のペンここ

.left{ 
    background-color:blue; 
    transform: skew(-10deg); 
    width: 500px; 
}

：

<div class="how-we-do"> 
<div class="left"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p> 
    </div> 
    <div class="right"> 
    </div> 
</div>

と私のCSSを次のように

が私のHTMLは次のようになりますhttp://codepen.io/Sidney-Dev/pen/gwNEve はあなたが助けることができると思います。

出典

2016-10-31 Wosley Alarico

あなたのスキュー作品、あなたはここで実際に何を求めていますか？ – Roberrrt

スキューが有効です。しかし、私が投稿した画像とまったく同じではありません。例：最初のボックスでは、カーブを両方の代わりに右側にのみしたいです...そして、2番目のボックスでは、カーブは左側になければなりません。 –

コンテンツをまっすぐにするには、別のdiv要素を正の値で囲みます。あなたのイメージには、背景イメージを使って見ることができます。

Codepen：http://codepen.io/anon/pen/yadwwL

HTML

<div class="how-we-do"> 
<div class="left"> 
    <div class="inner-left"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p> 
    </div> 
</div> 
<div class="right"> 
    <div class="inner-right"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p> 
    </div> 
</div>  
</div>

CSS

* { 
    box-sizing: border-box; 
} 

.how-we-do { 
    width: 70%; 
    margin: 0 auto; 
} 

.left, .right { 
    float: left; 
} 

.left{ 
    width: 50%; 
    padding: 2rem; 
    background-color:blue; 
    transform: skew(-10deg); 
    width: 500px; 
} 

.inner-left{ 
    transform: skew(10deg); 

} 

.right{ 
    width: 50%; 
    padding: 2rem; 
    background-color:red; 
    transform: skew(-10deg); 
    width: 500px; 
} 

.inner-right {  
    transform: skew(10deg);  
}

出典

2016-10-31 12:44:24

私のcodepenスニペットを実行すると、最初のコンテナと基本的に同じことがわかります。しかし、最初のボックスの斜めが左右に当てはまりますが、写真のように右側にしか欲しくないのです。 2番目のボックスの場合は、斜めが左側のみに適用されます。私は適切に説明できることを願っています。 –

私の新しい変更をチェックしてください –

私ははいをチェックしました。しかし、ボックスの形は私が投稿した写真と同じには見えません。 –

CSSスキューは、あなたがここに欲しいものではありません。 CSSシェイプが必要です。
CSSの達人Sara Soueidanは、たくさんの例を使って、それらについて深く綴っています。blog post Clippyはポリゴンの座標を計算するのに最適なツールです。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #2f73bc; 
 
    font-size: .5em; /*extra small for SO's little preview box*/ 
 
} 
 

 
article { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    margin: 0; 
 
    position: relative; 
 
    padding-top: 1em; 
 
    box-sizing: border-box; 
 
    text-align: right; 
 
} 
 

 
.gray { 
 
    -webkit-clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%); 
 
    clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%); 
 
    shape-outside: polygon(39% 0, 100% 0, 100% 100%, 0 100%); 
 
    background: #d7d7d7; 
 
    overflow: hidden; 
 
    width: 60%; 
 
    height: 100%; 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    float: right; 
 
    shape-margin: 2%; 
 
} 
 

 
h1 { 
 
    font-weight: normal; 
 
    font-size: 2em; 
 
} 
 

 
h1 span{ 
 
    font-weight: bold; 
 
} 
 

 
h3 { 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
} 
 

 
p{font-size: .9em;} 
 

 
/*buttons*/ 
 

 
article div{position: relative;} 
 
button { 
 
    border: none; 
 
    font-size: 3em; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    color: #2f73bc; 
 
    position: absolute; 
 
    top: 0; 
 
    margin-left: 5%; 
 
    /* right: 0; */ 
 
}

<head> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <div class="gray"></div> 
 
    <article><h1><span>WHAT</span> WE DO</h1> 
 
    <div> 
 
     <h3>Branding</h3> 
 
     <p>Simply scaling or moving elements around on <br> a flexible... READ MORE</p> 
 
    </div> 
 
    
 
    <div> 
 
     <h3>Navigation</h3> 
 
     <p>The site navigation is laid out in <br>different locations... READ MORE</p> 
 
    </div> 
 
    
 
    <div> 
 
     <h3>Content &amp; grids</h3> 
 
     <p>A responsive website will scale headlines, images, <br> text and... READ MORE</p> 
 
    </div> 
 
    
 
    <div> 
 
     <h3>Calls to action</h3> 
 
     <p>Good responsive design considers the critical calls <br> to action... READ MORE</p> 
 
    </div> 
 
    </article> 
 
</body>

そして、ここのボタンでそれを示すcodepenです：http://codepen.io/StuffieStephie/full/bqodjW/

出典

2017-03-15 14:37:15 StephanieQ

答えて

関連する問題