問題
cssで要素を台形にするには？
解決策
- css3のskewを使い、「transform: skewX(○○deg)」と記述することで、台形を実現することができます。
- skewで変形させた後、中の要素に同じ数値を逆方向にskewで変形させることで、形だけ台形の状態を実現できます。
css3による台形の実現
css3を駆使することで様々な表現が実現できるため、デザインに幅が広がります。
今回はcssで要素を台形にする方法をご紹介します。
DEMOはこちら
台形で表示
HTMLはこちら
要素「クラス：skew-box」の中に、さらに中を囲う要素「クラス：inner」を用意します。
<div class="skew-box">
<div class="inner">
<p class="text">台形で表示</p>
</div>
</div>CSSはこちら
要素「クラス：skew-box」を「transform: skewX(160deg)」で160度変形させ、さらに中を囲う要素「クラス：inner」を「transform: skewX(-160deg)」で-160度変形させます。
.skew-box{
display: block;
width: 200px;
height: 100px;
background-color: #fef2ef;
overflow: hidden;
position: relative;
-webkit-transform: skewX(160deg);
-moz-transform: skewX(160deg);
transform: skewX(160deg);
}
.skew-box .inner{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto -25px;
padding: 10px 55px;
-webkit-transform: skewX(-160deg);
-moz-transform: skewX(-160deg);
transform: skewX(-160deg);
}ポイント!
- skewを掛けた要素の中の要素に、同じ数値の逆の値（足して0になる）でskewを掛けることで、中の要素は変形されていない状態で表示することができます。
参考ページ
以下のサイトが、より詳しく解説してくれています。
【【CSS】背景だけ斜めにする at softelメモ】
https://www.softel.co.jp/blogs/tech/archives/5419
コメント