Question

我正在尝试重新创建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上重新创建弯曲角度，实现该结果的最佳解决方案是什么？

Answer 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>

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

1 个答案: