CSSでちょっとした図形を描いてみるーわーい

html

<ul>
<li class="squeaFill">べた四角</li>
<li class="squeaLine">線四角</li>
<li class="circleFill">黒丸</li>
<li class="circleLine">線丸</li>
<li class="circleLineDouble">二重線丸</li>
<li class="triangleRight">右三角</li>
<li class="triangleBottomRight">右下三角</li>
</ul>

css

共通

li:before{
margin-right: 5px;
content: " ";
display: inline-block;
}

べた四角

.squeaFill:before{
background: #666;
width: 1em;
height: 1em;
}

線四角

.circleLine:before{
width: 1em;
height: 1em;
border: solid 1px #333;
border-radius: 50%;
}

黒丸

.circleFill:before{
background: #666;
width: 1em;
height: 1em;
border-radius: 50%;
}

線丸

.circleLine:before{
width: 1em;
height: 1em;
border: solid 1px #333;
border-radius: 50%;
}

二重線丸

.circleLineDouble:before{
width: 0.6em;
height: 0.6em;
border: double 4px #333;
border-radius: 50%;
}

右三角

.triangleRight:before{
width: 0;
height: 0;
border-color: transparent transparent transparent #333;
border-style: solid;
border-width: 0.5em 0 0.5em 1em ;
}

右下三角

.triangleBottomRight:before{
width: 0;
height: 0;
border-color: transparent #333 #333 transparent;
border-style: solid;
border-width: 0.5em;
}