CSS3 シャープコーナー tag_html/css_WEB-ITnose

図に示すように、タグ ラベルは通常、背景画像を使用して、CSS3 コードを使用してシャープ コーナー エフェクトを実現できるようになりました (ブラウザが CSS3 プロパティをサポートしている必要があります)。

シャープ コーナー タグを実現するには、CSS3 スタイルを使用します。シンプルな HTML 構造と CSS スタイルを記述するだけです。

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

css は主に疑似要素を使用して鋭い角を実現します

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    }

疑似要素を使用して実現される鋭い角は、a タグ全体の絶対位置に基づいて左側に表示されます。行の高さと位置に注意してください。すべて em 単位です。

簡単な実装についてはスクリーンショットを参照してください: