https://blog.csdn.net/Szu_AKer/article/details/51755821
notice: that part of the triangle can be used as a background picture, but prone to matting. So make use of the css border triangle shape, the principle is as follows the shape of the border:
When we set the width and height of the content is zero, one can imagine what the effect will be as follows:
Then the other boder not reserved set the color to transparent transparent on the line. Specific code as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ position: relative; padding-top: 8px; } .con{ width: 200px; height: 100px; border: 1px skyblue solid; border-radius: 3px; background-color: skyblue; } .con-ret{ border: 7px solid transparent; border-bottom-color:skyblue; position: absolute; left: 10px; top:-6px; } </style> </head> <body> <div class="box"> <div class="con-ret"></div> <div class="con"></div> </div> </body> </html>