<html> <head> <title>css图标</title> <meta charset="utf-8"> </head> <style> .box{ width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; border-right: 20px solid red; } .box1{ width: 50px; height: 50px; margin: 100px auto; background-color: red; transform: skew(-25deg); } .box2{ width: 50px; height: 50px; margin: 100px auto; color: #000; border: 1px solid; border-radius: 50%; outline: 10px solid; outline-offset: -26px; } .box3{ width: 50px; height: 50px; margin: 100px auto; color: #000; border: 1px solid; border-radius: 50%; outline: 10px solid; outline-offset: -35px; } .box4{ width: 50px; height: 50px; margin: 100px auto; color: #000; border: 1px solid; border-radius: 50%; outline: 10px solid; outline-offset: -35px; transform: rotate(45deg); } .box5{ width: 50px; height: 0px; margin: 100px auto; box-shadow: 36px 10px 0 3px red, 36px 0 0 3px red, 36px 20px 0 3px red; } .box6{ width: 0; margin: 100px auto; color: red; border: 8px solid transparent; border-top: 8px solid red; box-shadow: 0 -12px 0 -4px; } .box7{ width: 0; height: 8px; background-color:orange; border: 8px solid transparent; border-bottom: 8px solid #fff; } .box8 { width: 0; height: 0; margin: 100px auto; border: 10px solid transparent; border-left: 10px solid red; -webkit-box-reflect: left 5px; box-reflect:left 5px; } </style> <body> <div class="box"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </body> </html>