CSSで四角形、円形、三角形の図形を作る方法

CSSのみで四角、円、三角の図形を作る方法をご紹介します。

 

四角形

シンプルな正方形のコードです。

CSS・HTML

.square{
 width: 200px;
 height: 200px;
 background: #75A9FF;
}
<div class="square"></div>

シンプルな円形のコードです。border-radiusの値を設定して円を作成します。

CSS・HTML

.circle{
 width: 200px;
 height: 200px;
 border-radius: 100%;
 background: #78FF94;
}
<div class="circle"></div>

三角形

シンプルな三角形のコードです。borderの境目を利用して三角形を作成します。

CSS・HTML

.triangle{
 width: 0;
 height: 0;
 border-left: 125px solid transparent;
 border-right: 125px solid transparent;
 border-bottom: 200px solid #FF5959;
}
<div class="triangle"></div>

おわりに

今回はCSSで四角形、円形、三角形の図形を作る方法をご紹介しました。

これらを応用することでメニューやシェアボタンなどを作成することもできるので、参考にしてください。

スポンサーリンク
記事下広告
記事下広告

シェアする

フォローする

スポンサーリンク
記事下広告