cssのみで描く基本的な図形

六角形 – css Hexagon –
「六角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例
html
<div class="hexagon"></div>
css
.hexagon {
pos...

五角形 – css Pentagon –
「五角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例
html
<div class="pentagon"></div>
css
.pentagon {
p...

星形 – css Star –
「星形」の描画。borderを使った例です。
html
<div class="star"></div>
css
.star {
position: relative;
width: 0;
height...

平行四辺形 – css Parallelogram –
「平行四辺形」の描画。borderを使った例とbackgroundを使った例です。「Parallelogram」って知りませんでした・・・
borderを使った例(縦1)
html
<div class="parallelog...

台形 – css Trapezoid –
「台形」の描画。borderを使った例とbackgroundを使った例です。「Trapezoid」って知りませんでした・・・
borderを使った例(上)
html
<div class="trapezoid_up">&l...

三角形2 – css triangle –
「三角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例(左上)
html
<div class="triangle_left_up"></div>
css
.t...

三角形 – css triangle –
「三角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例(上)
html
<div class="triangle_up"></div>
css
.triangl...

楕円形 – css oval –
「楕円形」の描画。値の指定で角丸から楕円まで出来ます。また、borderの使い方で色々と出来そうです。
html
<div class="oval"></div>
css
.oval {
width: 160...

円形 – css circle –
「円形」の描画。値の指定で角丸から正円まで出来ます。また、borderの使い方で色々と出来そうです。
html
html
<div class="circle"></div>
css
.circle {
w...

長方形 – css rectangle –
「長方形」の描画。基本何もしておりませんが、borderの使い方で色々と出来そうです。
html
<div class="rectangle"></div>
css
.rectangle {
width: ...

四角形 – css Square –
「四角形」の描画。基本何もしておりませんが、borderの使い方で色々と出来そうです。
html
<div class="square"></div>
css
.square {
width: 100px;...