CSS3中的弧/曲线而不是图像 - 边界半径？

Question

我已经获得了一个带有顶部和底部标签的设计（参见代码段图片）。它们以曲线开头。我不想使用图形，而是希望使用CSS，但必须与设计完全一致（顶部曲线与底部曲线相反）。

我觉得它可以实现，但它可能是一个非常肮脏的黑客，就像一个div内的圆圈，任何重叠的div隐藏，嗯。任何可以提供建议的CSS小孩？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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


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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用伪元素：

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>

Answer 3

不。这将是一个20px x 10px .p​​ng，曲线形状具有相同的粉红色背景颜色，其余部分是透明的。

然后你会应用

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