Making triangles with CSS

When we see a picture similar to this:

We tend to think, hey, this is not simple, with a picture on it. Yes, it's easy to do it with pictures. But the next thing we're going to talk about is how to do this with CSS. First, let's define a div:<div class= "up" ></div>Then add some style to it:.up{  width:50px;  height:50px;  background-color:red;  font-size:0px;  line-height:0px;}   Result you TM tease me, this is clearly square good! Good, don't worry, put down your hands of the bricks, we may as well set its border. .up{  width:50px;  height:50px;  background-color:red;  border : 50px solid green;  font-size:0px;  line-height:0px;} And then it's like this.:  you're looking for a dead man. Ok, don't worry, I say the last sentence: we try to change the color of its four borders to be different. .up{  width:50px;  height:50px;  background-color:red;  border-top:50px solid green;  border-right:50px solid yellow;  border-bottom:50 PX Solid blue;  border-left:50px solid black;  font-size:0px;  line-height:0px;} The results are as follows:  like a little meaning ok, don't worry, we try to set the width and height of the div is 0;.up{  width:0px;  height:0px;  background-color:red;   border-top:50px solid green;  border-right:50px solid yellow;  border-bottom:50px solid blue;  bo rder-left:50px solid black;  font-size:0px;  line-height:0px;} Result: OK, we got four triangles, and now we're going to get directions pointing up on theThat blue triangle, so we set the background color of the other triangles to be transparent, and remove the background color previously set:.up{  width:0px;  height:0px;  border-top:50px Solid transparent;  border-right:50px solid transparent;  border-bottom:50px solid blue;  border-left:50px Solid transparent;  font-size:0px;  line-height:0px;}    Okay, where's the applause? I know what you're trying to say, and we look closely and find that the top border is not necessary because it doesn't affect the size and shape of the triangle below us, so we remove the top border and then adjust the background color:.up{  width:0px;  height:0px ;  border-right:50px solid transparent;  border-left:50px solid transparent;  border-bottom:50px Solid # 6699cc;  font-size:0px;  line-height:0px;}   Finished. In this way, we can make a triangle in four directions: the full code: HTML:

1 <Divclass= "Up"></Div>2 <Divclass= "Right"></Div>3 <Divclass= "Down"></Div>4 <Divclass= "Left"></Div>

Css:

1 . Up,.right,.down,.left{2 width:0px;3 Height:0px;4 font-size:0px;5 Line-height:0px;6}7 . up{8 Border-right:50px Solid Transparent;9 Border-left:50px Solid Transparent;Ten Border-bottom:50px Solid #6699cc; One} A . Right{ - Border-bottom:50px Solid Transparent; - Border-top:50px Solid Transparent; the Border-left:50px Solid Green; -} - . Down{ - Border-top:50px Solid Yellow; + Border-right:50px Solid Transparent; - Border-left:50px Solid Transparent; +} A . Left{ at Border-right:50px Solid Red; - Border-top:50px Solid Transparent; - Border-bottom:50px Solid Transparent; -}

Complete:

From for notes (Wiz)

Making triangles with CSS