CSS_html/css_WEB-ITnose で描いた絵

カタログ [1] 長方形 [2] 円 [3] 楕円 [4] 直角三角形 [5] 正三角形 [6] 平行四辺形 [7] 台形 [8] 六芒星 [9] 六角形 [10] 】 五芒星

シンプルな形

長方形

rree

円

div{    width: 100px;    height: 100px;    background-color: red;}

楕円

れー

直角三角形

れー

正三角形

rree

Parallelogram

rree

台形

div{    width: 100px;    height: 100px;    background-color: red;    border-radius: 50%;}

複雑なグラフィック

六芒星

2つの三角形が重なった

div{    width: 100px;    height: 50px;    background-color: red;    border-radius: 50%;}

六角形

二つの台形を繋ぎ合わせたもの

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom-color: red;}

五芒星

手前の同じ形を二つ重ねたもの

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-width: 86.6px 50px;    border-bottom-color: red;}

れー

継続的に更新...