問題 × 解決策

cssで要素を任意の形に切り抜く方法

問題

cssで要素を任意の形に切り抜くには?

解決策

cssの「clip」を使用して、「clip-path : polygon(切り抜く座標)」を記述することで実現することができます。

切り抜きをcssのみで行う

切り抜きをcssのみで行うことで、表現の幅が広がると共に、作業工程を減らすことができます。
今回はcssで要素を任意の形に切り抜く方法をご紹介します。

DEMOはこちら

右側をリボン状に切り抜き

HTMLはこちら

要素「クラス:clip-box」を用意します。

<div class="clip-box">
	<p class="text">右側をリボン状に切り抜き</p>
</div>

CSSはこちら

要素「クラス:clip-box」に「clip」を使用して、「clip-path : polygon(切り抜く座標)」を記述することで任意の形で切り抜くことができます。

.clip-box{
	display: inline-block;
	padding: 10px 35% 10px 15px;
	background-color: #FCECE8;
    clip-path : polygon(0% 0%, 100% 0%, 75% 50%, 100% 100%, 0% 100%);
}

ポイント!

  • clip」は切り抜く範囲を座標で指定することで、任意の形に切り抜くことができます。
  • clip」のフォーマットは「clip-path : polygon( X軸1 Y軸1, X軸2 Y軸2, X軸3 Y軸3 );」で、座標は「①X軸 ②Y軸」で左上の角を基準に数値を設定します。
  • 座標の始点と終点は自動的につながるので、座標設定はそれを前提に行います。

参考ページ

以下のサイトが、より詳しく解説してくれています。

【CSS clip の使い方:ボックスを切り抜き表示(クリッピング)する – ウェブランサー】
https://weblan3.com/css/clip

コメント

コメントを残す

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

12 + six =

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

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