CSS3 sharp corner tag_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:48:52
Original
1419 people have browsed it

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>
Copy after login

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    }
Copy after login

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. :

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!