Question

我正在实施一个设计，它在盒子的右下方有“蓬勃发展”：

我想知道是否有一个很好的方法只使用CSS。我简单但不理想的解决方案是拥有内部和外部div。外部div具有黄色背景颜色，而内部div具有蓝绿色。

内部div具有底部边界半径，指定了两个值以给我椭圆。

理想情况下，我希望能够在没有包装元素的情况下做到这一点，但到目前为止我还没有运气。我觉得它必须是可能的，使用渐变或一些这样的，但还没有成功破解它！我也看了http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/，但这不太正确，导致锯齿状的边缘..

任何提示？

HTML：

<div class="outer">
  <div class="inner">
    <!-- content -->
  </div>
</div>

CSS：

.outer {
  background-color: orange;
  height: 200px;
  width: 500px;
}

.inner {
  background-color: teal;
  border-bottom-right-radius: 70% 80px;
  height: 100%;
}

编辑：带有双div的代码和Codepen示例：https://codepen.io/sebbornidentity/pen/xdqpxG

Answer 1

您可以使用伪元素执行此操作并获得更清晰的标记。

50％控制底部（水平）长度，70％控制右侧（垂直）长度。

＆＃13;

div {
  position: relative;
  height: 150px;
  background: orange;
}
div::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: teal;
  border-bottom-right-radius: 50% 70%;
}

＆＃13;

<div></div>

＆＃13;

与伪有好处，它可以同时具有边框和阴影

＆＃13;

div {
  position: relative;
  height: 150px;
}
div::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: teal;
  border-bottom-right-radius: 50% 70%;
  border-bottom: 4px solid orange;
  border-right: 4px solid orange;
  box-shadow: 5px 5px 5px #999
}

＆＃13;

<div></div>

＆＃13;

Answer 2

是。不要试图将橙色元素放在顶部，而是将其放在底部，而青色元素可以具有边界半径（而橙色元素则显示通过）。简单的例子：

＆＃13;

#thing {
  width: 400px;
  height: 200px;
  background-color: teal;
  border-bottom-right-radius: 50%;
  position: relative;
}

#thing:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: orange;
  z-index: -1;
}

＆＃13;

<div id="thing"></div>

＆＃13;

这里使用

z-index将橙色元素放在青色元素后面。

Answer 3

以下是使用.inner和.outer div的工作示例。您可以使用/来操纵border-radius属性的垂直和水平值。如果您想了解更多信息，请查看此link。

＆＃13;

html, body {height: 100%;}

.outer {
  height: 100%;
  background: #F5C154;
}

.inner {
  height: 100%;
  border-radius: 0 0 400px 0 / 0 0 100px 0;
  background:  #82C4B7;
}

＆＃13;

<div class="outer">
  <div class="inner"></div>
</div>

＆＃13;

您还可以使用radial-gradient完成工作。但是，这个解决方案需要一个伪元素。另请注意，此示例并未给您很大的空间来操纵border-radius。这是因为径向渐变是完美的圆。这是工作示例：

＆＃13;

.box {
  position: relative;
  background: radial-gradient(circle at 220px -190px, teal 400px, orange 0);
  height: 200px;
  width: 500px;
}

.box::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 200px;
  background: teal;
}

＆＃13;

<div class="box"></div>

＆＃13;

希望这有帮助！

CSS Gradients - 负边界半径

3 个答案: