css怎么把水平的做成波浪的？

css怎么把水平的做成波浪的？禁止不动就好了

img

img


width: 80px;
    height: 80px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #d4a446;

用SVG或者echart
https://www.jb51.net/css/667715.html

你这和八卦图的实现原理差不多吧 你可以看下八卦图的实现：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS实现八卦图</title>
    <style>
        #circle {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 50px;
            border-top: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 50px solid red;
            border-left: 2px solid red;
            border-radius: 100px;
 
        }
 
        #circle::after {
            content: '';
            width: 10px;
            height: 10px;
            border: 20px solid red;
            position: absolute;
            left: 0;
            top: 25px;
            border-radius: 50px;
            background: #fff;
        }
 
        #circle::before {
            content: '';
            width: 10px;
            height: 10px;
            border: 20px solid #FFF;
            position: absolute;
            right: 0;
            top: 25px;
            border-radius: 50px;
            background: red;
        }
    </style>
</head>
 
<body>
    <div id="circle"></div>
</body>
 
</html>

写样式麻烦的话可以直接找图片代替啊