CSS |为侧边栏或侧框架创建自定义形状[关闭]

Question

我有一个具有这种设计的应用程序。白色侧边栏应该看起来与图片中的形状完全一样，具有不规则的形状。我需要一些 CSS 向导来帮助我弄清楚如何实现它。

Answer 1

请添加以下代码

<div class="container">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

CSS：-

 .container {
    display: flex;
    height: 100vh; 
}

.sidebar {
    width: 300px; 
    background: white;
    clip-path: path("M 0 0 H 300 V 600 C 150 600 150 400 300 400 V 0 H 0 Z");
    z-index: 2;
}

.content {
    flex-grow: 1;
    background: #004d40;
    padding: 20px;
}