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.

Simple implementation results See:

CSS3 's Sharp Corner label