DIV制作小三角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> .body{ height: 100px; width: 100px; background-color:blue; /*相对位置*/ position: relative; /*无用代码*/ margin: 100px 100px; } /**/ .triangle1{ width: 0; height: 0; border: 10px solid red; border-top: none; border-right-color: transparent; border-left-color: transparent; /*绝对位置*/ position: absolute; /*将小三角形向下移90个像素*/ top: 90px; /*将小三角形向右移10个像素*/ left: 10px; } .triangle2{ width: 0; height: 0; border: 10px solid red; border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; position: absolute; top: 30px; left: -20px; } .triangle3{ width: 0; height: 0; border: 30px solid red; border-top: none; border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; position: absolute; top: 0px; left: 40px; } .triangle4{ width: 0; height: 0; border: 10px solid red; } .triangle5{ width: 0; height: 0; border: 10px solid red; border-left-color: transparent; border-top-color: transparent; position: absolute; bottom: 0px; right: 0px; } .triangle6{ width: 0; height: 0; border: 10px solid red; border-left-color: transparent; border-right-color: transparent; border-top: none; position: absolute; left: 36px; bottom: 100px; } .triangle7{ width: 0; height: 0; border: 10px solid red; border-bottom-color: transparent; border-top-color: transparent; border-right-color: transparent; position: absolute; top: 30px; left: 100px; } </style> <body> <div class="body"> <div class="triangle1"> </div> <div class="triangle2"> </div> <div class="triangle3"> </div> <div class="triangle4"> </div> <div class="triangle5"> </div> <div class="triangle6"> </div> <div class="triangle7"> </div> </div> </body> </html>