CSS3 's Sharp Corner label

, the tag tag is usually made with a background image, and now uses the CSS3 code to achieve the sharp corner effect (requires the browser to support the CSS3 property).

Using the CSS3 style to implement a sharp-angle label, simply write a simple HTML structure and CSS style.

<p>    <a>Tag1</a>    <a>Tag2</a>    <a>Tag3</a>    <a> Tag4</a></p>

CSS mainly uses pseudo-elements to achieve sharp corners

a{    Dispaly:inline-block;    position:relative;    Background: #ccc;    Color:green;    Line-height:1em;    margin:0 10px;    padding:3px;} a:before{    Position:absolute;    Content: "";    width:0;    height:0;    Border:transparent 0.74em solid;    Border-right-color: #ccc;    top:0;    Left:-1.4em    }

Using pseudo-elements to achieve the sharp angle based on the entire a-label absolute positioning is displayed on the left, note that the line height and positioning are used in the EM unit.

CSS3 's Sharp Corner label