只需修改 width 、height、border-top-right-radius 便可随意使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 100px; } div{ position: relative; background-color: orange; } div:before, div:after { content: ‘‘; position: absolute; background-color: inherit; } div, div:before, div:after { width: 10em; height: 10em; border-top-right-radius: 30%; } div { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } div:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%); } div:after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);} </style> </head> <body> <div></div> </body> </html>
原文：https://www.cnblogs.com/L-xjco/p/15250291.html