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;...