使用 CSS 创建形状

问题描述

尝试用 css 创建这个形状

我已经达到了这个结果

但不知道如何在矩形底部创建圆弧 这是我的css

.left-page {             
         color: hsl(35,35,35);
         border-top-left-radius:  26px;
         border-bottom-left-radius:  26px;
         border: solid 1px hsl(274,65,35);
         
    }

解决方法

你可以尝试这样的事情，但我认为这不是个好主意：

.shape {
  width: 400px;
  height: 400px;
  background: red;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  position: relative;
 
}

.shape::after {
  content: '';
  background: red;
  width: calc(100% - 15px);
  height: 40px;
  position: absolute;
  bottom: -17px;
  right: 0;
  border-radius: 50%;
}

<div class='shape'>

</div>

,

您可以使用底部的“页脚”（或 after 伪元素）来说明您正在寻找的效果。

.content {
  width: 200px;
  height: 300px;
  
  border: 1px solid purple;
  border-bottom: none;
  
  border-top-left-radius: 32px;
}

.bottom {
  width: 200px;
  height: 50px;
  
  border-bottom: 1px solid purple;
  border-left: 1px solid purple;
  border-right: 1px solid purple;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

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