CSS を使用して、チャット ボックスに小さな鋭い角やバブル効果を作成します

このような鋭い角をよく見かけますが、以前は理解できず、すべて画像で作られていると思っていましたが、後から見ると、その多くが美しく、リソースを節約できることに驚きました。本当に両方の長所を持っています!

それでは、CSS を使用してこの効果を実現するにはどうすればよいでしょうか?まず、簡単なコードを書いてみましょう:

コードは次のとおりです:

<p class="arrow"></p>
<style type="text/css">
.arrow {    
width:0;    
height:0;
    
font-size:0;
border:solid 10px #000;
}</style>

ここで、p の幅と高さが両方とも 0, であるため、実際には境界線で構成される黒い正方形を取得できます。それでは、幅と高さが両方とも 0 の場合に p の上下左右の境界線がどのように見えるかを詳しく見てみましょう。 次に、境界線の各辺の色を異なる色に設定します。

コードは次のとおりです:

<p class="arrow"></p>
<style type="text/css">
.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
    
border-color
:#f00 #0f0 #00f #000;
}
</style>

p の幅と高さが両方とも 0 の場合、その境界線全体が 4 つの三角形で構成され、各辺が三角形であることがわかりました。この機能を使用して、かわいい少しシャープなものを作成できます。コーナー。不要な三方枠（三角形）の色を背景と同じにして、必要な三角形だけが見えるようにし、位置決めで位置を調整するだけです。具体的なコードは次のとおりです:

コードは次のとおりです:

<p class="s
end
">
    <p class="arrow"></p>
</p>
<style type="text/css">
body {
    
background
:#4D4948;
}
.send {
    
position:relative;
    width:150px;
    height:35px;
    background:#F8C301;
    border-radius:5px; /* 圆角 */
    
margin:30px auto 0;
}
.send .arrow {
position:absolute;
    
top:5px;
right:-16px; /* 圆角的位置需要细心
调试
哦 */
    width:0;
    height:0;
    font-size:0;
    border:solid 8px;
    border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

これで完了です。効果は以下のようになります:

【関連する推奨事項】

1. CSS3の無料ビデオチュートリアル

2. ブラウザーはハイエンドのモバイル パフォーマンス CSS3 アニメーションを実現します

3. 画像のフライインおよびフェードアウト効果を実現するための h5+css3 コード例 4. CSS3 を使用して 8 を作成する方法を説明します。ロードアニメーションの種類

5.CSS描画標準の円形パターンの使い方を教えます

以上がCSS を使用して、チャット ボックスに小さな鋭い角やバブル効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。