Shapes by border property
It is possible to make a shape of right triangle, isosceles triangle and many more. See the following shapes to grasp the idea of border-width.
See the example below to understand. content:""; property is set for the following boxes.
<style>
.exampleBlock{
content:"";
border:20px lightgreen groove;
border-left-color:red;
border-right-color:lightblue;
border-bottom-color:yellow;
margin:15px;
float:left;
}
.changeBorderWidth{
content:"";
border:20px lightgreen solid;
border-left-color:red;
border-right-color:red;
margin:15px;
float:left;
clear:both;
}
</style>
<div style="height:auto; width:100%; float:left; font-size:14px;">
<div style="width:200px; float:left;"><div class="exampleBlock"></div>border-width:20px;</div>
<div style="width:200px; float:left;"><div class="exampleBlock" style="border-width:30px;"></div>border-width:30px;</div>
<div style="width:200px; float:left;"><div class="exampleBlock" style="border-width:40px;"></div>border-width:40px;</div>
<div style="width:200px; float:left;"><div class="exampleBlock" style="border-width:50px;"></div>border-width:50px;</div>
</div>
<script>
function changeBorderUpdate(){
setInterval(changeBorder,1);
}
function changeBorder(){
document.getElementsByClassName("changeBorderWidth")[0].style.borderWidth = document.getElementById("borderWidthMeter").value+"px";
document.getElementById("changingValueOfBorderWidth").innerHTML = document.getElementById("borderWidthMeter").value+"px";
}
</script>In the above given shapes, the concept of border-width is used to make such kind of shapes. These shapes demonstrate the idea of border-width.
How to make a right triangle by border-width property
Following the same rule as given in the above example, we can make right triangle by border-bottom and border-right properties.
<style>
div{
position:absolute;
content:"";
border-bottom:40px lightblue solid;
border-right:30px solid transparent;
}
</style>The color of border-right is set to transparent.
How to make an isosceles triangle by border-width property
In this case, the color of border-left and border-right is set to transparent.
<style>
div{
position:absolute;
content:"";
border-bottom:40px lightblue solid;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
</style>The size of triangle can be defined by the value of border properties.
The shape of a triangle by border-width
See how border-width plays an important role in making such kind of shapes.
<style>
.exampleBlock{
content:"";
border:20px lightgreen groove;
border-left-color:red;
border-right-color:lightblue;
border-bottom-color:yellow;
margin:15px;
float:left;
}
.changeBorderWidth{
content:"";
border:20px lightgreen solid;
border-left-color:red;
border-right-color:red;
margin:15px;
float:left;
clear:both;
}
</style>
<div class="changeBorderWidth"></div>
<p>content:"";</p>
<p>border-width:<span id="changingValueOfBorderWidth">20px</span>;</p>
<input type="range" min="0" max="50" id="borderWidthMeter" value="20" onchange="changeBorderUpdate();">
<script>
function changeBorderUpdate(){
setInterval(changeBorder,1);
}
function changeBorder(){
document.getElementsByClassName("changeBorderWidth")[0].style.borderWidth = document.getElementById("borderWidthMeter").value+"px";
document.getElementById("changingValueOfBorderWidth").innerHTML = document.getElementById("borderWidthMeter").value+"px";
}
</script>The border is always defined inside the box and not outside the box.