<!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>画各种形状</title> </head> <style> * { margin: 0; padding: 0; } .circle { 200px; height: 200px; border-radius: 50%; text-align: center; line-height: 200px; background-color: red; } .triangle { 0; height: 0; border: 200px solid transparent; border-top-color: pink; } .trapezoid { 200px; height: 0; border: 100px solid transparent; border-bottom-color: pink; } .trapezoid2 { 200px; height: 200px; border: 1px solid red; background: linear-gradient(102deg, transparent 0 30%, green 30% 100%) 0 0, linear-gradient(-102deg, transparent 0 30%, green 30% 100%) 100% 0; background-size: 51% 100%; background-repeat: no-repeat; } .trapezoid3 { margin-top: 10px; background-color: red; 200px; height: 200px; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); } .sector { 0; height: 0; border: 200px solid transparent; border-bottom-color: red; border-radius: 50%; } .oval { margin-top: 10px; 100px; height: 25px; border-radius: 50px 50px 50px 50px / 0 0 25px 25px; background-color: pink; } .oval1 { margin-top: 0; 200px; height: 100px; border-radius: 200px / 100px; background-color: aqua; } .arrow { 100px; height: 100px; border-left: 20px solid red; border-top: 20px solid red; transform: rotate(-45deg); } </style> <body style="padding-bottom: 400px"> <div class="circle">圆形</div> <div class="triangle"></div> <div class="trapezoid"></div> <div class="trapezoid2"></div> <div class="trapezoid3"></div> <div class="sector"></div> <div class="oval"></div> <div class="oval1"></div> <div class="arrow"></div> </body> </html>