Arc/Curve 在 CSS3 而不是图像中 - 边框半径？

Question

我得到了一个带有顶部和底部标签的设计（参见片段图像）。他们从曲线开始。我不想使用图形，而是想用 CSS 来做到这一点，但它必须与设计完全相同（顶部曲线与底部曲线相反）。

我觉得它是可以实现的，但它可能是一个非常肮脏的 hack，就像 div 内的一个圆圈与隐藏的 div 重叠的任何东西，嗯。有 CSS 能指教的神童吗？

Answer 1

没有。那将是一个 20px x 10px .png 的曲线形状，具有相同的粉红色背景颜色，space 的其余部分是透明的..

然后您将申请

.nav li:first-child {
    background: xxxxxx
}
.nav li:last-child {
    background: xxxxxx
}

Answer 2

这是我的尝试 - 您可以使用 width/left/border-radius 属性来获得完美的曲线。

body {
  background: #F9EDF9;
}

.main {
  background: #7C2A7E;
  height: 75px;
  margin-left: 150px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.circle {
  background: #F9EDF9;
  border-radius: 48%;
  height: 158px;
  left: 0;
  position: absolute;
  top: 0;
  width: 118px;
}

.top .circle {
  left: -87px;
  top: -14px;
}
.bottom {
  margin-top: 75px;
}

.bottom .circle {
  left: -87px;
  top: -72px;
}

<div class="main top">
  <div class="circle"></div>
</div>


<div class="main bottom">
  <div class="circle"></div>
</div>

Answer 3

你可以用一个伪元素来做:

body {
    background: pink;
}
.someElement {
    background: purple;
    height: 30px;
}

.someElement:before {
    content: "";
    width: 15px;
    height: 32px;
    background: pink;
    border-radius: 0 0 100% 0;
    display: block;
}

<div class="someElement"></div>

Arc/Curve 在 CSS3 而不是图像中 - 边框半径？

Arc/Curve in CSS3 rather than image - border-radius?

css

css-shapes