+
.mon_humeur1{
position:absolute;
width: 40px;
height: 40px;
background-color: #F5FFFA;
margin-left: 1px;
}
.trait_vertical1{
position:absolute;
width: 2px;
height: 10px;
background-color: black;
}
.trait_vertical1:active{
background-color: #F5FFFA;
}
.trait_horizontal1{
position:absolute;
width: 10px;
height: 2px;
background-color: black;
}
.trait_horizontal1:active{
background-color: #F5FFFA;
}
.action{
position:absolute;
cursor:pointer;
background-color: #F5FFFA;
}
.angle1 {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:10px ; margin-left:10px">
<div class="trait_horizontal1">
<div class="trait_vertical1" style="margin-left:10px">
<div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px">
<div class="trait_vertical1">
<div class="trait_vertical1" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px; margin-top:-10px"
/div
/div
/div
/div
/div
/div
/div
/div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div
/div
/div
/div
/div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px; margin-left:-3px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-20px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
/div
/div
/div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div
/div
/div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div
/div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4px"
/div /div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-10px"
/div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-4px; margin-top:-10px"
div class="trait_horizontal1" style="margin-left:-6px; margin-top:20px"
/div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1 angle1" style="margin-top:3px"
div class="trait_horizontal1 angle1" style="margin-top:-6px ; margin-left:-10px"
/div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-14px"
div class="trait_horizontal1" style="margin-left:4px"
/div /div /div /div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:9px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
/div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div /div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
/div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div /div /div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div /div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4.5px"
div class="trait_vertical1" style="margin-top:10px ; margin-left:4.5px"
/div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:65px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:-10px ; margin-left:6px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div
div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
/div /div
div class="trait_vertical1" style="margin-top:20px ; margin-left:41px"
/div /div
div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div