English alphabets using divs and css
HTML
<DIV class="table-data" id="div1">
a test div
</DIV>
<div class="circle">
</div>
<div class="triangle-up">
</div>
<div class="letter-e">
<div id="letter-j-1"></div>
<div id="letter-j-2"></div>
<div id="letter-j-3"></div>
<div id="v">
</div>
<div id="h1">
</div>
<div id="h2">
</div>
<div id="h3">
</div>
<div id="letter-c"></div>
<div id="c-cut"></div>
<div id="letter-a-1"></div>
<div id="letter-a-2"></div>
<div id="letter-a-3"></div>
<div id="a-top-fix"></div>
</div>
CSS
*{
box-sizing: border-box;
}
div{
HEIGHT: 100px;
width: CALC(100% - 50%);
/*Background-color: Yellow;*/
border: red solid 1px;
left: 3em;
position: relative;
}
div.Table-data{
background-color: yellow;
}
#div1{
background-color: orange;
}
div.circle{
width: 60px;
height: 30px;
background-color: red;
border-radius: 50%;
}
div.triangle-up{
width: 0px;
height: 0px;
border-top: 50px solid red;
border-bottom: 50px solid yellow;
border-right: 50px solid orange;
border-left: 50px solid pink;
}
.letter-e{
position: relative;
}
div#v{
position: absolute;
width: 10px;
height: 50px;
left: 10px;
top: 10px;
background-color: red;
}
div#h1{
position: absolute;
width: 30px;
height: 10px;
left: 20px;
top: 10px;
background-color: red;
}
div#h2{
position: absolute;
width: 25px;
height: 10px;
left: 20px;
top: 30px;
background-color: red;
}
div#h3{
position: absolute;
width: 30px;
height: 10px;
left: 20px;
top: 50px;
background-color: red;
}
#letter-c{
position: absolute;
top: 10px;
left: 50px;
width: 45px;
height: 50px;
border: solid red 10px;
border-radius: 50%;
}
#c-cut{
position: absolute;
top: 28px;
width: 15px;
height: 15px;
left: 84px;
z-index: 999;
background-color: white;
border: solid white 0px;
}
#letter-a-1{
position: absolute;
top: 10px;
left: 108px;
width: 10px;
height: 50px;
background-color: red;
transform: rotate(27deg);
}
#letter-a-2{
position: absolute;
top: 10px;
left: 128px;
width: 10px;
height: 50px;
background-color: red;
transform: rotate(-27deg);
}
#letter-a-3{
position: absolute;
top: 40px;
left: 108px;
width: 33px;
height: 10px;
background-color: red;
}
#a-top-fix{
position: absolute;
top: 10px;
...
JavaScript
function getParam(name){
var a = "";
}