如何创建具有平滑弯曲边框的 div答案

【问题标题】：how to create div with a smooth curved border如何创建具有平滑弯曲边框的 div
【发布时间】：2020-05-13 19:37:12
【问题描述】：

我正在尝试重新创建 this 元素

我创建了以下结构：

.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }


.slider-background {     background: white;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 90%;
    height: 90%;
    text-align: right;
    z-index: 1; }
    
.slider-background a {
  padding: 15px 20px;
    display: block;
}

.slider-info {
  padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }

<div class="slider-container">

  <div class="slider-background">
    <a href="#">more<br>info</a>
  </div>
  <div class="slider-content">
    
    <div class="slider-info">
      <img src="https://via.placeholder.com/140x100"/>
      <h2>
        lorem<br><b>ipsum</b>
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
      </p>
    </div>
    
  </div>

</div>

但我不确定如何在顶部 div 上重新创建弯曲的角度，实现该结果的最佳解决方案是什么？

【问题讨论】：

标签： css

【解决方案1】：

这是一个带有伪元素和倾斜变换的想法。

我只保留了相关的，所以我们可以看到诀窍：

.slider-info {
  padding: 45px 30px;
}

.slider-content {
  background: 
    linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
  width: 300px;
  margin: 20px auto;
  border-radius:20px 0 20px 20px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.slider-content::after {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:200px;
  background:lightblue;
  transform-origin:bottom;
  transform:skew(30deg);
  border-radius:0 20px 0 0;
}

<div class="slider-content">

  <div class="slider-info">
    <img src="https://via.placeholder.com/140x100" />
    <h2>
      lorem<br><b>ipsum</b>
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
    </p>
  </div>

【讨论】：