如何为 div 创建如下所示的曲线

Question

我在圆圈上方创建 div 时遇到问题，如下所示！

我是这样设置的

CSS:

.count-select {
    box-shadow: 0 -5px 10px -5px rgba(0,0,0,.8);
    border-top: 2px solid #E75532;
    height: auto;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: 12px;
    border-radius: 50%/100px 100px 0 0;
}

结果设计的不太喜欢，望大神们帮忙

谢谢！

Answer 1

您可以通过向 left/right 添加负值来使元素溢出。然后添加一些填充以避免像这样的内容溢出：

.container {
  width: 200px;
  border: 1px solid blue;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.count-select {
  box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8);
  border-top: 2px solid #E75532;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: -30px;
  right: -30px;
  padding: 12px 30px;
  border-radius: 50%;
  text-align:center;
}

<div class="container">
  <div class="count-select ">
    select items
  </div>
</div>

Answer 2

如果将其分成两个 div 而不是一个，则可以控制边框半径应该达到的距离。请参阅下面的示例。

body {
  background: lightgoldenrodyellow;
}

.top {
  background: white;
  border-top: 2px solid red;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  height: 100px;
  width: 400px;
  text-align: center;
  box-shadow: 0px -3px 10px rgba(0,0,0,0.3);
}

.middle {
  background: white;
  width: 400px;
  height: 100px;
  text-align: center;
  margin: 0;
}

<div class="container">
<div class="top">
  <p>Select items and swipe up</p>
</div>
<div class="middle">
0 items selected
</div>
</div>

如何为 div 创建如下所示的曲线

How to create a curve as shown below for the div

html

css

css-shapes