CSS use: Before:after write small triangle instance sharing

This article mainly introduces how to use: Before:after write a small triangle of relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Previously written triangles are always in the same color, with no border style. As follows:

The CSS code is as follows:

. tri-up{width:0;height:0;border-left:20px Solid transparent;border-right:20px Solid transparent;border-bottom:20px Solid red;  }. tri-left{width:0;height:0;border-top:20px Solid transparent;border-bottom:20px Solid transparent;border-left:20px Solid red;}. tri-right{width:0;height:0;border-top:20px Solid transparent;border-bottom:20px Solid Transparent;border-right: 20px solid red;}. tri-down{width:0;height:0;border-left:20px Solid transparent;border-right:20px Solid transparent;border-top:20px Solid red; }

To write the following small triangle, you need to use Pseudo-class: Before:after

CSS code:

#demo {            margin:100px;;            width:100px;            height:100px;            Background-color: #fff;            position:relative;            border:2px solid #333;        } The style of the box        #demo: After, #demo: before {            border:solid transparent;            Content: ";            height:0;            left:100%;    Depending on the position of the triangle, you can change it arbitrarily.            Position:absolute;            width:0;        }         #demo: after {            border-width:10px;            Border-left-color: #fff;            top:20px;//changes according to the position of the Triangle        }//here is a white triangle        #demo: before {            border-width:12px;            Border-left-color: #000;            top:18px;        } Here is a black triangle//When the style of #demo:after and #demo:before is coincident, because the top value is different in size, you can get the middle is white, but the border of the triangle. Such as.

<p id= "Demo" ></p>

To change the style:

The CSS code is as follows:

#demo {            margin:100px;;            width:100px;            height:100px;            Background-color: #fff;            position:relative;            border:2px solid #333;        }        #demo: After, #demo: before {            border:solid transparent;            Content: ";            height:0;            top:100%;            Position:absolute;            width:0;        }        #demo: after {            border-width:10px;            Border-top-color: #fff;            left:20px;        }        #demo: before {            border-width:12px;            Border-top-color: #000;            left:18px;        }