ホームページ > 記事 > ウェブフロントエンド > CSS3 シャープコーナー tag_html/css_WEB-ITnose
CSS3 シャープコーナー tag_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:48:521424ブラウズ
図に示すように、タグ ラベルは通常、背景画像を使用して、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 単位です。
簡単な実装についてはスクリーンショットを参照してください:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。