<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 三角形 */ .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 100px solid pink; border-bottom: 100px solid red; border-left: 100px solid blue; border-right: 100px solid green; } .box2 { width: 0; height: 0; border: 100px solid transparent; border-bottom-color: pink; margin: auto; } /* tooltip箭头（三角形）效果 */ .jd { position: relative; width: 120px; height: 240px; background-color: pink; } .jd span { position: absolute; width: 0; height: 0; right: 15px; top: -20px; line-height: 0; font-size: 0; border: 10px solid transparent; border-bottom-color: pink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div> </body> </html>
