問題 × 解決策

cssで要素を台形にする方法

問題

cssで要素を台形にするには?

解決策

  1. css3のskewを使い、「transform: skewX(○○deg)」と記述することで、台形を実現することができます。
  2. 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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 + five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧