如何在div底部显示椭圆

Question

我想在div的底部有一个椭圆，但是我希望它是响应性的。我有下一个代码：

.home-title {
  background-color: #ba173a;
  position: relative;
  width: 100%;
  text-align: center;
}

.home-title:before { 
  content: "";
  position: absolute;
  bottom: -95px;
  left: 33%;
  margin-left: -939px;
  height: 500px;
  width: 2050px;
  border-radius: 100%;
  border: 100px solid #fff;

}

.g-font-weight-600{
  font-weight: 600;
}

.g-pa-70{
  padding: 70px;
}

.g-color-white{
  color: white;
}

<div class="home-title">
  <h2 class="g-font-weight-600 g-pa-70 g-color-white">
    This is some dummy text<br />This is more dummy text
  </h2>
</div>

此代码段中的问题是，我总是需要在width中更改.home-title:before才能正确使用。

任何想法，无论屏幕大小是多少，如何都能始终在div的底部保留一个椭圆。

Here is the fiddle.

更新

我希望在divs角落有这种效果

不是那样的效果：

Answer 1

如果我正确理解了您的问题，那么可以通过创建一个伪元素来实现：

1. 将border-radius设置为100%。这会导致曲率响应性地适应伪元素的框边界（无论它是什么）
2. 将伪元素的宽度设置为100%
3. 将高度设置为固定值，其中浅的高度将创建具有“矩形边界”的伪元素。这将创建一个区域，在该区域中将定义沿父元素底部边缘的椭圆/曲线形状。
4. 将伪元素从父对象的底部边缘垂直偏移一半伪元素的高度。这将导致伪元素的下半部分可见，从而在父元素上产生弯曲的底部边缘的错觉
5. 为伪元素的背景颜色着色以匹配父元素的背景颜色：

.home-title {
  background-color: #ba173a;
  position: relative;
  width: 100%;
  text-align: center;
}

.home-title:before { 
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display:block;
        
  /* Color of curve to match parent background color */
  background:#ba173a;  

  /* Causes the curve/radius to adaptively resize based on parent width */
  border-radius: 100%;       

  /* Causes curve to expand adaptively to parent width */
  width: 100%;

  /* Set fixed height to twice that of curve depth */
  height: 100px;

  /* Offset ellipse to create illusion of curve */
  bottom:-50px;

}

.g-font-weight-600{
  font-weight: 600;
}

.g-pa-70{
  padding: 70px;
}

.g-color-white{
  color: white;
}

<div class="home-title">
  <h2 class="g-font-weight-600 g-pa-70 g-color-white">
    This is some dummy text<br />This is more dummy text
  </h2>
</div>

更新

要获得“尖锐的”角（如更新的问题所示）与响应性弯曲的“底边”，您可以按以下方式修改代码：

.home-title {
  overflow: hidden;
  /* Add padding to bottom to allow depth of curve to be visible */
  padding-bottom: 50px;
}

/* Style nested div */
.home-title>div { 
  background-color: #ba173a;
  position: relative;
  width: 100%;
  text-align: center;
}

.home-title>div:before {
  content: "";
  position: absolute;
  bottom: 0;

  /* Offset the ellipse left-ward by some amount */
  left: -10%;

  /* Set width percentage to exceed the parent width, plus twice the offset amount */
  width: 120%;

  border-radius: 100%;
  background: #ba173a;
  display: block;
  height: 100px;
  bottom: -50px;
}

.g-font-weight-600 {
  font-weight: 600;
}

.g-pa-70 {
  padding: 70px;
}

.g-color-white {
  color: white;
}

<div class="home-title">
  <div> <!-- UPDATE: Add nested element -->
    <h2 class="g-font-weight-600 g-pa-70 g-color-white">
      This is some dummy text<br />This is more dummy text
    </h2>
  </div>
</div>

https://jsfiddle.net/8Lm932jv/

Answer 2

这是您的意思吗？

.home-title {
  background-color: #ba173a;
  position: relative;
  width: 100%;
  text-align: center;
  
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}


/*
.home-title:before { 
  content: "";
  position: absolute;
  bottom: -95px;
  left: 33%;
  margin-left: -939px;
  height: 500px;
  width: 2050px;
  border-radius: 100%;
  border: 100px solid #fff;
}
*/

.g-font-weight-600 {
  font-weight: 600;
}

.g-pa-70 {
  padding: 70px;
}

.g-color-white {
  color: white;
}

<div class="home-title">
  <h2 class="g-font-weight-600 g-pa-70 g-color-white">
    This is some dummy text<br />This is more dummy text
  </h2>
</div>