我怎样才能用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: #fff; 
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); 
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1); 
}

.content {
    flex-grow: 1;
    background: #4A7748; 
}