如何为div如下图所示创建曲线 [英] How to create a curve as shown below for the div

问题描述

在圆上方创建div时出现问题，如下所示！

I have a problem when creating a div above the circle as shown below!

我已经这样设置

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;
}

结果，它不像设计，希望人们提供帮助.

As a result, it is not like the design, expect people to help.

谢谢！

推荐答案

您可以通过向左/右添加负值来使元素溢出.然后添加一些填充来避免内容溢出，例如:

You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this :

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

这篇关于如何为div如下图所示创建曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！