Pure triangular effect achieved css
1, first of all, I created a class div called 'box' is, for the time being we affectionately call it 'the box'
<html>
<!--方块的样式-->
<style>
.box{
width:20px;
height:20px;
background-color:blue;
}
</style>
<div class='box'></div>
<html>
We look at the results, in fact, a common background color is blue div.
2, we give the 'box' Add four border style, border width set point, the color of the border to four different values, help us to see
.box
{
width:50px;
height:50px;
background-color:blue;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
See the effect of
3, we put 'box' width and height to 0px, remove the blue background color, of course, on the left border around the brain make up about, then we are on the code, look at the results.
.box
{
width:0px;
height:0px;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
See renderings, what I seem to have seen four different colors triangle, the next step to do, is very clear.
4, suppose we want an upward triangle, as long as the 'box', right and left direction of the border color to be transparent, it is only at the border, which is up the small triangle, and to the Code!
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}
To see results! Small green upward triangle appeared, ( O ) /
