以前は、漫画を読むときに会話コンテンツがある場合、通常、スピーカーから伸びる三角形の境界線が表示されていました。以下の図に似ています:
これを実現するには、さまざまな方法があります。ここで説明する方法は、境界線を作成し、それを 2 つの三角形で覆うことです。効果は次のとおりです:
理解を容易にするために、次のように本文に黒い背景を追加しました:
コードは次のとおりです:
<!doctype html><html><head><meta charset="UTF-8"><title>带三角缺口的边框</title><style>.out { display:block; width:0; height:0; border-left:6px dashed transparent; border-right:6px dashed transparent; border-top:0; border-bottom:7px solid #ccc; position:relative; top:-7px; left:50%;}.inner { position:absolute; border-left:6px dashed transparent; border-right:6px dashed transparent; border-top:0; border-bottom:7px solid #fff; left:-6px; top:2px;}div { position:relative; margin:0 auto; width:80px; height:100px; border:1px solid #ccc; border-radius:5px;} </style></head><body><div><span class="out"> <span class="inner"></span></span></div></body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
