When I used to read comics, if there was dialogue, there would usually be a border with a triangle leading out from the speaker. Similar to the picture below:
There should be many ways to achieve it. The method provided here is to create a border and then cover it with two triangles. The effect is as follows:
In order to facilitate understanding, I added a black background to the body, as follows:
The code is as follows:
<!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>
Solution to Google Chrome not working
The difference between header files and source files
cdn server security protection measures
Introduction to the location of win10 control panel
virtual digital currency
sort sorting function usage
Summary of java basic knowledge
How to delete a directory in LINUX
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
