CSSで作図する ref: http://qiita.com/yaegaki/items/a1e518d16be9b85479b4

file0.css

.square {
   width: 100px;
   height: 100px;
   background: black;
}

file1.html

<div class="square"></div>

file10.css

.square-rotate {
   width: 100px;
   height: 100px;
   background: black;
   transform: rotate(45deg);
}

file11.html

<div class="square-rotate"></div>

file12.css

.mountain {
   margin-top: 100px;
   width: 100px;
   height: 30px;
   background: black;
   position: relative;
}

.mountain:before {
   content: "";
   display: block;
   width: 80px;
   height: 30px;
   background: red;
   top: -30px;
   left: 10px;
   position: absolute;
}
.mountain:after {
   content: "";
   display: block;
   width: 50px;
   height: 30px;
   background: yellow;
   top: -60px;
   left: 25px;
   position: absolute;
}

file13.html

<div class="mountain"></div>

file14.css

.four-circle {
   width: 50px;
   height: 50px;
   border-radius: 25px;
   background: black;
   box-shadow: 
       60px 0,
       0 60px,
       60px 60px;
}

file15.html

<div class="four-circle"></div>

file16.css

.battery {
    border: 8px solid black;
    width: 50px;
    height: 30px;
    position: relative;
}

.battery:before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 25px;
    top: 3px;
    left: 2px;
    background: black;
    box-shadow: 
       13px 0,
       26px 0;
}

.battery:after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 20px;
    top: 6px;
    left: 57px;
    background: black;
}

file17.html

<div class="battery"></div>

file18.css

.battery {
    border: 8px solid black;
    width: 50px;
    height: 30px;
    position: relative;
}

.battery:before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 20px;
    top: 3px;
    left: 2px;
    background: black;
    box-shadow: 
       0 4px,
       13px 0,
       13px 4px,
       26px 0,
       26px 4px,
       56px 3px;
}

file19.html

<div class="battery"></div>

file2.css

.circle {
   width: 100px;
   height: 100px;
   background: black;
   border-radius: 50px;
}

file3.html

<div class="circle"></div>

file4.css

.square2 {
   width: 100px;
   height: 100px;
   background: black;
   border-radius: 40px 0 40px 0; /*左上,右下に40px*/
}

file5.html

<div class="square2"></div>

file6.css

.triangle {
    width: 0px;
    height: 0px;
    background: transparent;
    border-bottom: 150px solid black;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

file7.html

<div class="triangle"></div>

file8.css

.square-scale {
   width: 100px;
   height: 100px;
   background: black;
   transform: scale(2);
}

file9.html

<div class="square-scale"></div>