CSSを使えば、簡単な図形から高度なデザインまで、さまざまな形を表現することができます。図形を作るためには、width、height、border、background-color などのプロパティを組み合わせて活用します。この記事では、基本的な図形の作り方と、真似したくなるような魅力的な図形を紹介します。
1. 基本的な図形の作り方
1.1 正方形
正方形は、width と height を同じ値にすることで作成します。
.square {
width: 100px;
height: 100px;
background-color: #3498db;
}- 解説：
このCSSコードでは、widthとheightに 100px を指定することで正方形を作成しています。背景色には青色（#3498db）を設定。
1.2 円
円は、正方形に border-radius を50%指定することで作成します。
.circle {
width: 100px;
height: 100px;
background-color: #e74c3c;
border-radius: 50%;
}- 解説：
この例では、正方形の図形にborder-radius: 50%を指定することで、円を表現しています。背景色には赤色（#e74c3c）を使用。
1.3 三角形
三角形は border を活用することで作成できます。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2ecc71;
}- 解説：
三角形は幅と高さをゼロに設定し、ボーダーの使い方によって表現できます。この場合、border-bottomに色を指定し、左右のボーダーを透明にして形を作ります。
1.4 楕円形
楕円形は、border-radius を50%にしつつ、異なる width と height を指定することで作成します。
.ellipse {
width: 150px;
height: 80px;
background-color: #9b59b6;
border-radius: 50%;
}- 解説：
幅150px、高さ80px の要素にborder-radius: 50%を適用すると、楕円形が作成されます。
1.5 五角形
五角形やその他の多角形も、clip-path を利用して作成できます。
.pentagon {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid #e67e22;
position: relative;
}.pentagon:after {
content: '';
position: absolute;
left: -50px;
top: 30px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 40px solid #e67e22;
}
- 解説：
五角形は、三角形のようなボーダーを使ってベースを作り、さらに:after擬似要素で頂点部分を追加して表現しています。
2. 真似したくなる応用図形
2.1 ハート
CSSでハート型を作るには、2つの円と1つの四角形を組み合わせます。
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(-45deg);
}.heart:before,
.heart:after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #e74c3c;
border-radius: 50%;
}
.heart:before {
top: -50px;
left: 0;
}
.heart:after {
left: 50px;
top: 0;
}
- 解説：
四角形を45度回転させてから、beforeとafterで円を2つ作り、それを合体させることでハート型ができます。
2.2 ダイヤモンド型
ダイヤモンド型も、CSSの transform を使用して簡単に作成できます。
.diamond {
width: 100px;
height: 100px;
background-color: #1abc9c;
transform: rotate(45deg);
}- 解説：
正方形のdivを45度回転させることで、ダイヤモンドの形を作ります。シンプルですが、視覚的に印象深いデザインです。
2.3 立体的なボタン
立体的なボタンは、box-shadow や transform を使うことで表現できます。
.button-3d {
width: 120px;
height: 50px;
background-color: #2980b9;
color: white;
text-align: center;
line-height: 50px;
border-radius: 5px;
box-shadow: 0 5px #1f618d;
transition: transform 0.2s;
}.button-3d:active {
transform: translateY(5px);
box-shadow: 0 1px #1f618d;
}
- 解説：
ボタンに影をつけ、クリック時にtransform: translateYを使って押されたように見せることができます。
3. デザイン面での使用シーン
CSSで作成した図形は、さまざまなデザインの場面で役立ちます。以下は、その使用例です。
円形のプロフィール画像やアイコン
ユーザープロフィールやソーシャルメディアのアイコンは、円形にデザインすることで洗練された印象を与えます。トグルボタンやインジケーター
三角形や楕円形は、ナビゲーションメニューやスライダーのデザインに適しています。カスタムシェイプのボタンや装飾要素
ハート型やダイヤモンド型は、特別なイベントやブランドイメージに合わせたカスタムデザインとして使えます。ヒーローセクションやバナーの装飾
複雑な多角形や曲線を使って、ウェブサイトの上部にあるヒーローセクションやプロモーションバナーを個性的に演出できます。
まとめ
CSSを使って作れる図形は、シンプルなものから凝ったものまで多岐にわたります。これらの図形は、ウェブデザインにおいてアクセントを加えたり、UI要素として実用的に利用できるものです。さまざまな図形やアニメーションを応用することで、より魅力的なデザインを作り出しましょう。
コメント