CSS3 を使用して小さな三角形の div ボックスを実装します (画像なし)_html/css_WEB-ITnose

今、WeChat、QQ の Mac 版、QQ スペース タイムラインなど、小さな三角形のボックスがたくさん表示されます。チャットや公開されたステータス コンテンツの外側に小さな三角形の付いた長方形のボックスがあり、それに囲まれています。とても良さそうだったので、自分で作成することにしました。 前回は背景画像をオフセットする方法を使用しました。今日は画像を使用せず、CSS3 を使用して実装コードを見てみましょう。

まず最初に、CSS3 でのトライアングル実装の原理を見てみましょう: 実際、これは透過のアプリケーション用です

HTML コードがこのような場合

<div class="arrow-up">     <!--向上的三角--></div><div class="arrow-down">    <!--向下的三角--></div><div class="arrow-left">    <!--向左的三角--></div><div class="arrow-right">    <!--向右的三角--></div>

以下は CSS3 を使用して上向きの実装を行います、それぞれ下向き、左向き、右向きの三角形です

うーん、コードは次のように構成されています。これらをまとめると、効果はおそらく次のようになります:

さて、原理は理解できたので、練習して div ボックスを実装しましょう小さな三角形が付いています。

まず、HTML コードを書きます:

/*箭头向上*/.arrow-up {    width:0;     height:0;     border-left:30px solid transparent;    border-right:30px solid transparent;    border-bottom:30px solid #fff;}     /*箭头向下*/.arrow-down {    width:0;     height:0;     border-left:20px solid transparent;    border-right:20px solid transparent;    border-top:20px solid #0066cc;}     /*箭头向左*/.arrow-left {    width:0;     height:0;     border-top:30px solid transparent;    border-bottom:30px solid transparent;     border-right:30px solid yellow; }   /*箭头向右*/.arrow-right {    width:0;     height:0;     border-top:50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid green;}

クラス "entry-traangle" がマウントされた div は、小さな三角形を実装するためにのみ使用されます。 CSS3 の透明を使用して、この div の三角形を実装し、次に絶対位置を設定し、z-index:-1;、margin-left:-19px; を設定します。次の CSS コードを参照してください。丸みを帯びた角を実現します。絶対配置と z-index:-1 の目的は、親 div のコンテンツ レイアウトに影響を与えずに、下部の小さな三角形を制御する div を作成することです。

さて、終わりました。