CSSのclip-pathで実装可能な、背景を斜めにする方法をご紹介します。
目次
斜め背景DEMO
まずは実装内容を確認しましょう、DEMOページをご覧ください。
See the Pen Untitled by SOLLUNA (@ygi) on CodePen.
コピペ用実装コード
index.html style.css を作成し、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>斜め背景を実装方法</title>
</head>
<body>
<section class="section-1">
<h2>レスポンシブデザイン</h2>
<p>近年は、モバイルでの閲覧を優先し、PC向けのデザインはそれに合わせて作られるようになっています。</p>
</section>
<section class="section-2">
<h2>UI/UXデザインの基本</h2>
<p>UI/UXデザインとは、ユーザーが直面する問題やニーズを考慮しつつ、使いやすく、美しいインターフェースをデザインすることです。</p>
</section>
<section class="section-3">
<h2>カラーコントラストの重要性</h2>
<p>テキストやボタンなどのUI要素と背景色との間の色の差を指します。</p>
</section>
</body>
</html>body {
margin: 0;
}
section {
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 50px;
color: #fff;
}
.section-1 {
background-color: #ff779f;
clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 calc(100% - 100px));
}
.section-2 {
color: #000000;
}
.section-3 {
background-color: #59bcfd;
clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
}CSS
clip-path利用してクリッピングします。
.section-1 {
background-color: #ff779f;
clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 calc(100% - 100px));
}clip-path可視領域を定義し、内部のコンテンツは表示、外部のコンテンツは非表示なるようにクリッピングすることができます。polygon()関数は、複数の点を指定して形状を定義します。
clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
このプロパティは、次の4点を持つポリゴン形状を定義しています。(0, 50px): 左上の点。左端から0%、上端から50pxの位置にあります。(100%, 0): 右上の点。右端から0%、上端から0pxの位置にあります。(100%, calc(100% - 50px)): 右下の点。右端から0%、下端から50pxの位置にあります。(0, 100%): 左下の点。左端から0%、下端から0%の位置にあります。
上部から50px下げることで右肩上がりの斜めが形成され、右下の点を50px上げることで形状が維持されます。
これにより、要素が指定された形状でクリッピングされるため、特定の形状のデザインを実現できます。
clip-pathで画像クリッピング
SOLLUNAブログ WEB制作
CSSのclip-pathで画像クリッピング | SOLLUNAブログ WEB制作
CSSのclip-pathを使用することで画像を三角形や多角形など様々な形状にクリッピングできます。これによりデザインに幅広い表現が可能になります。 画像クリッピングDEMO ま…