首页写一个梯形盒子,上面窄下面宽,底下两个角是逆时针的圆弧

写一个梯形盒子,上面窄下面宽,底下两个角是逆时针的圆弧

时间: 2024-03-21 18:37:39 浏览: 102

好的，下面是使用CSS3的方式绘制一个上底边长为100，下底边长为200，高为80，底下两个角是逆时针的圆弧的梯形盒子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>梯形盒子绘制</title> <style> .trapezoid { width: 200px; height: 80px; background-color: #f9c2ff; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } </style> </head> <body> <div class="trapezoid"></div> </body> </html> ``` 运行上述代码，即可在浏览器中看到绘制的梯形盒子。其中，使用 clip-path 属性和 polygon() 函数来定义梯形形状，使用 border-radius 属性来定义底下两个角为圆弧。

阅读全文