如何为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

您可以通过向左/右添加负值来使元素溢出。然后添加一些填充以避免内容溢出，如下所示：

.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而不是一个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>