1盒2种不同的颜色

Question

我正在尝试在html / css中创建类似的内容，但我想知道如何更改框底部的颜色。我可以通过在彼此之间创建2个不同的框来做到这一点吗？

亲切的问候， 干

Answer 1

您可以做到

.father{
  width:100vm;
  height:200px;
}
.first-div{
  border-radius:30px 30px 0 0;
  height:150px;
  width:100vm;
  background:#b8a8d5;
}
.second-div {
 border-radius:0 0 30px 30px;
  height:50px;
  width:100vm;
  background:#5423b6;
}

<div class="father">
<div class="first-div"></div>
<div class="second-div"> </div>
</div>