CSS3 sharp corner tag_html/css_WEB-ITnose

As shown in the picture, Tag tags usually use background images. Now you can use CSS3 code to achieve the sharp corner effect (the browser needs to support CSS3 attributes).

Using CSS3 styles to implement sharp corners, you only need to write simple HTML structures and CSS styles.

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

css mainly uses pseudo elements to implement 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    }

The sharp corners achieved using pseudo elements are displayed on the left based on the absolute positioning of the entire a tag. Note that the line height and positioning are both in em units.

See the screenshot for the simple implementation effect. :