「円形」の描画。値の指定で角丸から正円まで出来ます。また、borderの使い方で色々と出来そうです。
html
html
<div class="circle"></div>
css
.circle { width: 100px; height: 100px; background-color: #39a9d6; border-radius: 50px; }
border
html
<div class="circle_border"></div>
css
.circle_border { width: 100px; height: 100px; background-color: #39a9d6; border: 5px solid #2d424f; border-radius: 55px; }
個別に設定
html
<div class="circle_triangle"></div>
css
.circle_triangle { width: 0; height: 0; border-top: 50px solid #59bde0; border-right: 50px solid #39a9d6; border-bottom: 50px solid #2d424f; border-left: 50px solid #2d8fb5; border-radius: 50px; }
個別に設定2
html
<div class="circle_triangle2"></div>
css
.circle_triangle2 { width: 40px; height: 40px; background-color: #dce0e0; border-top: 50px solid #59bde0; border-right: 50px solid #39a9d6; border-bottom: 50px solid #2d424f; border-left: 50px solid #2d8fb5; border-radius: 70px; }