CSS3 はチャットバブルを巧みに実装します

従来のチャットバブル

画像の真上にある

コードは次のとおりです

<div class="comment"></div>

<style type="text/css">
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

誰もが聞いたことがある、角丸四角形と三角形の原理。 border を transparent に設定できる場合は、上記の例のコードをコピーし、border-color 属性を変更して三角形の実装を調べることができます。

皆さんご存知かと思いますので、ここでは詳しくは述べませんが、他の実装方法についてお話します。

ここでの三角形の部分を正方形に置き換えて同じ効果を得ることができます。その方法は、小さな正方形を回転させてその一部を露出させることです。コードは次のとおりです

.comment {
  position: relative;
  width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

欠点は、小さな三角形は直角三角形しかできないことです。もちろん、変形が多い場合は、ひし形に変換してから接続することもできます。最初のメソッド。ブラウザは、transform(2D) と互換性があります。属性は次のとおりです

全体的に、いくつかのメソッドで安心して使用でき、大きな互換性の問題はありません。

現実的なケース

ここのデザイン案には余分な枠線が含まれています。デザイン案に直接アップロードしてください

?️ 対処方法を考えて、上記を確認しましょう

最初の方法自体は枠線の透明化です、再度透明にするにはどうすればよいでしょうか。境界線を設定するのが問題なので、今は考えません。

2番目の方法で小さな正方形の回転を使用する場合、デザインドラフトのバブルの背景がrgba(247, 188, 10, 0.03)であるため、レイヤーのオーバーレイが問題になります。まず実装コードを見てみましょう

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

効果は次のとおりです

上記のアイデアには問題があります。小さな正方形がバブルの一部と重なるためです。また、背景が半透明であるため、常に問題が発生します。透明な背景色を吸収して重ね合わせます (デザイン案の背景全体が単色であることに誰もが気づいたため)

この考え方に従うと、問題が再び発生します。具体的な質問は以下の2つです。

1. 小さな正方形を上に重ねると、小さな正方形の左半分の境界線が表示されます

前の写真と比較すると、角丸長方形の右側は次のようになります。確かに覆われていますが、小さな四角の左側に境界線が表示されます

対処方法は、次のようにすることができます。

.comment {
  width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

問題が解決したことがわかりました。効果は次のとおりです

この場合、個人的なテストでは可能ですが、パディング権が小さすぎるとどのような問題が発生しますか。

div にテキストを追加します。

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

結果は次のとおりです

文字 o の右下隅が小さな正方形の左側で覆われていることがわかります。もちろん、z-index 属性を通じてハッキングできます。

2. 小さな正方形が角丸長方形の下にある場合、角丸長方形の右側の境界線が完全に表示されます。この解決策は無理がありますが、あまり説明したくありません。 。

上記の方法の欠点も明らかです。では、需要の変化に応じて筋肉や骨を傷つけずに、より厳密に行うにはどうすればよいでしょうか。

トライアングルプランも利用させていただきます！三角解法は実現不可能ということではないでしょうか？

1つの三角形は不可能です。2つではどうでしょうか。後の兄弟を登場させました。プロジェクトの実際のコードは次のとおりです

<div class="comment">Hello,orange.Welcome to FrontEnd World!</div>

まとめ

実際の問題を解決するには、さまざまな方法がありますが、それは各人の考え方によって異なります。主な理由は、余分な疑似要素が存在するためです。つまり、CSS は設計上のアイデアの多様性です。非常に柔軟です。