CSS3 tip label, css3 tip label

CSS3 tip label, css3 tip label

The background image is usually used for Tag creation. Currently, the top corner effect can be achieved using CSS3 Code (the browser must support the CSS3 attribute ).

To use CSS3 styles to implement tip labels, 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 achieve sharp corners

A {dispaly: inline-block; position: relative; background: # ccc; color: green; line-height: 1em; margin: 0 10px; padding: 3px;}: before {position: absolute; content: ""; width: 0; height: 0; border: transparent 0.74em solid; border-right-color: # ccc; top: 0; left: -1.4em}

Based on the absolute positioning of the entire a tag, the sharp angle implemented by the pseudo element is displayed on the left side. Note that the Row Height and positioning are all em units.

Simple implementation: