CSS 擬似要素で図形を作成する
CSSの擬似要素を使うと、HTMLのマークアップを変更することなく、様々な図形を表現することができます。 本稿では、三角形、台形、円形、半円、扇形、ハート、吹き出しなど、よく使われる図形の作成方法について、 コード例を交えながら詳しく解説していきます。
1. 三角形
border プロパティと透明なボーダーを利用することで、様々な方向の三角形を作成できます。
ボーダーが交差する部分で三角形が形成される仕組みを利用します。
例：上向き三角形
<style>
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid black;
}
</style>
<div class="triangle-up"></div>
上記のように、左右のボーダーを透明にすることで、下ボーダーのみが表示され、三角形が作成されます。 方向を変えるには、透明にするボーダーと表示するボーダーを調整します。
2. 台形
上下のボーダーの幅と色を調整し、高さを調整することで台形を作成できます。
例：上底が短い台形
<style>
.trapezoid {
width: 100px;
height: 0;
border-top: 50px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
<div class="trapezoid"></div>
上ボーダーを黒、左右ボーダーを透明にすることで、上底が短い台形を作成できます。
上底の長さは、width プロパティで調整します。
3. 円形
width と height を同じ値に設定し、border-radius を 50% に設定することで円を作成できます。
例：円
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
</style>
<div class="circle"></div>
4. 半円
border-radius の値を調整することで、上下左右の半円を作成できます。
例：上半円
<style>
.semi-circle-top {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: red;
}
</style>
<div class="semi-circle-top"></div>
上記のように、上部の角を丸くし、下部の角を直角にすることで上半円を作成できます。
5. 扇形
円形をベースに、異なる背景色とborder-radiusの値を設定することで扇形を作成できます。
例：扇形
<style>
.sector {
width: 100px;
height: 100px;
border-radius: 0 100px 100px 0;
background-color: yellow;
}
</style>
<div class="sector"></div>
上記のように、右上と右下の角を丸くすることで扇形を作成できます。
6. ハート
2つの回転した正方形と1つの逆三角形を組み合わせてハート型を作成できます。
例：ハート
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: pink;
}
.heart::before {
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(45deg);
left: 25px;
}
.heart::after {
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
left: 25px;
}
.heart::before {
left: 0;
}
</style>
<div class="heart"></div>
上記のように、::before と ::after 擬似要素を使用して2つの回転した正方形を作成し、それらを重ねることでハート型を作成できます。
7. 吹き出し
border-radius と ::before 擬似要素を使用して、角が尖った吹き出しを作成できます。
尖った角の方向や大きさは、必要に応じて調整できます。
例：吹き出し
<style>
.speech-bubble {
position: relative;
padding: 15px;
margin: 20px;
border-radius: 10px;
background-color: lightblue;
}
.speech-bubble::before {
content: "";
position: absolute;
bottom: -20px;
left: 20px;
border-style: solid;
border-width: 10px 15px 0 0;
border-color: lightblue transparent transparent transparent;
}
</style>
<div class="speech-bubble">吹き出しです</div>
上記のように、::before 擬似要素を使用して三角形を作成し、それを吹き出しの下部に配置することで、角が尖った吹き出しを作成できます。
まとめ
本稿では、CSSの擬似要素を用いて、様々な図形を作成する方法を紹介しました。 擬似要素とボーダー、ボーダー半径を組み合わせることで、HTMLのマークアップを変えることなく、多様な表現が可能になります。
関連情報
QA
Q1: 擬似要素で作成した図形に影をつけることはできますか？
A1: はい、box-shadow プロパティを使用して影をつけることができます。ただし、擬似要素自身に適用する必要があります。
Q2: 擬似要素で作成した図形にアニメーションをつけることはできますか？
A2: はい、transition プロパティや animation プロパティを使用してアニメーションをつけることができます。擬似要素のプロパティもアニメーションの対象に含めることができます。
Q3: 擬似要素で作成した図形はレスポンシブに対応できますか？
A3: はい、メディアクエリを使用して、画面サイズに応じて図形のサイズや形状を変更することができます。擬似要素のプロパティもメディアクエリで変更することができます。