css-Triangle and its principle

CSS in the Web page is more common, before the picture, but now basically all through the CSS can be done, the implementation is relatively simple, we can see a set of simple triangle effect:

In fact, it is relatively simple to achieve, through the empty Div and then set the width of the height of 0, after which can be surrounded by the width of border, control the shape of the triangle, four border can be seen as two horizontal and vertical wood overlap effect, two horizontal in the top, the triangle is the middle overlapping part of the split out, The code for the style is as follows:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

.triangle {    width: 0;    height: 0;    border-top: 20px solid #EEB422;    border-right: 20px solid #C0FF3E;    border-bottom: 20px solid #A020F0;    border-left: 20px solid #7CFC00;}.triangle-up {    width: 0;    height: 0;    border-right: 20px solid transparent;    border-bottom: 40px solid #A020F0;    border-left: 20px solid transparent;}.triangle-down {    width: 0;    height: 0;    border-top: 40px solid #EEB422;    border-right: 20px solid transparent;    border-left: 20px solid transparent;}.triangle-left {    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-left: 40px solid #7CFC00;}.triangle-right {    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-right: 40px solid #C0FF3E;} .triangle-left-bottom {    width: 0;    height: 0;    border-top: 40px solid transparent;    border-left: 40px solid #7CFC00;}.triangle-right-bottom {    width: 0;    height: 0;    border-top: 40px solid transparent;    border-right: 40px solid #C0FF3E;}

The specific HTML page code:

123456789101112131415161718192021222324252627282930313233343536

<divclass="row">    <span>四个三角</span>    <divclass="triangle">    </div></div><divclass="row">    <span>上三角</span>    <divclass="triangle-up">    </div></div><divclass="row">    <span>下三角</span>    <divclass="triangle-down">    </div></div><divclass="row">    <span>左三角</span>    <divclass="triangle-left">    </div></div><divclass="row">    <span>右三角</span>    <divclass="triangle-right">    </div></div><divclass="row">    <span>左下角</span>    <div class="triangle-left-bottom">    </div></div><divclass="row">    <span>右下角</span>    <divclass="triangle-right-bottom">    </div></div>

css-Triangle and its principle