直接代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>菱形</title> <style> .box2{ position: relative; display: inline-block; flex: 1; overflow: hidden; overflow: visible; } .box2:after{ position: absolute; display: inline-block; 20px; height: 20px; background: pink; transform: rotateZ(45deg)skew(30deg,30deg); margin-top: -14px; margin-left: -2px; border: 1px solid rgba(0,0,0,.25); border-bottom: none; border-left: none; /*transform: skew(20deg) rotate(45deg);*/ content: ""; } </style> </head> <body> <div class="box2"></div> <div class="box"></div> </body> </html>