純粋な CSS を使用してバブル ダイアログ ボックスの鋭いコーナー効果を実現するサンプル コード

この記事では主にバブルダイアログボックスの鋭いコーナー処理を実装するための純粋な CSS の実装コードを紹介します。これは非常に優れており、必要な方は参考にしてください。

まずレンダリングを見てください。

簡単な大まかなコード:

html:

<p class="dialog-box">  
  <span class="bot"></span>  
  <span class="top"></span>  
</p>

less:

.dialog-box {  
  position: relative;  
  span {  
    width:0;   
    height:0;   
    font-size:0;   
    overflow:hidden;   
    position:absolute;  
    &.bot{  
      border-width: 15px;   
      border-style: solid dashed dashed;   
      border-color: transparent transparent #F9743A transparent;   
      left: 15px;   
      top: -29px;  
    }  
    &.top{  
      border-width:13px;   
      border-style:solid dashed dashed;   
      border-color:transparent transparent #fff transparent;   
      left:17px;   
      top:-25px;  
    }  
  }  
}

現地語での説明:

他の方向に鋭い角が必要な場合は、境界線の色の順序(上、右、下)を調整します、 左） 。

主な原則は、おそらく、同じ形で比率が異なる 2 つの小さな三角形、同じ背景色の固体三角形のボット、および白い背景の上部を用意し、上部がボットを覆い、それらの三角形を調整することです。 (一般的に、点滅するエッジが表示されるように、実線のブロックは白いブロックよりも大きくなります)。

最後に、それらが重なり合うようにあらゆる手段を試し（白い上部が上、固体のボットが下）、最後に

絶対位置

（左、上）のパラメータを調整して、シームレスに重なり合うようにしました。 。はい、もうできたでしょうか？

以上が純粋な CSS を使用してバブル ダイアログ ボックスの鋭いコーナー効果を実現するサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。