web-dev-qa-db-ja.com

テキストを歪めずにcssを使用してdivの上部を傾斜させる

CSSを使用して、上部のみに傾斜し、その中のテキストを歪めないdivを作成しようとしています。 CSSのみにしたい理由は、レスポンシブデザインであり、デバイスの幅が変わるとこのdivの残りの部分が曲がるため、パーセンテージに応答する必要があるためです。

私が達成しようとしていることの写真はここにあります：

Slanted design

これまでに得たのは、傾斜したdivを作成し、それを他のdiv内に配置してから、負のマージンを使用して上に引き上げることです。私がこれを行ったこの方法には2つの問題があります。最初の問題は、最小の画面縮小（ブラウザの幅を非常に小さくする）では、傾斜したdivが含まれているdivよりも小さくなり、奇妙に見えることです。また、このdivは、その後に追加するテキストを隠蔽しています。

マークアップ：

<aside>
                <div id="skew"></div><!-- #skew -->
                <h3 id="refer">Refer Your Friends</h3>
</aside>

CSS：

   #skew {
background:#00328b;
width:103%;
height:66px;
border-radius:8px;
margin-top:-47px;
margin-left:-1.2%;
  -webkit-transform: skewY(-5.5deg); 
 -moz-transform: skewY(-5.5deg); 
  -ms-transform: skewY(-5.5deg); 
   -o-transform: skewY(-5.5deg); 
      transform: skewY(-5.5deg); 
}

.main aside {
color: white;
padding: 20px 10px;
margin-top:120px;
border-radius:8px;
background: rgb(0,51,141); /* Old browsers */
}

親のスキューを脇に使用してみましたが、これにより、その中のすべての子要素がスキューされます。これが固定レイアウトの場合は、絶対配置を使用して支援しますが、応答性と柔軟性があるため、他にどのようなアプローチを取るべきかわかりません。

また、ボックスシャドウを使用した外側のグローや背景のグラデーションなど、divに追加する他の効果があるため、CSSで使用したいと思います。

デザインも変更できません。

これを達成する方法についての入力は素晴らしいでしょう！

htmlcssresponsive-designtransformcss-shapes
14
codeadventurer

ボックスを一方向に歪ませ、その中身を他の方向に歪ませます。

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>@jonathansampson.</p>
        <p>This box is skewed.</p>
        <p>In supported browsers.</p>
    </div>
</aside>

/* Skew the container one way */
.skew-neg {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

/* And the child another way */
.skew-pos {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
}

これにより、次のような結果になります。

enter image description here

デモ： http://jsfiddle.net/Q7dKT/191/

26
Sampson