如何使用css3隐藏背景颜色

Question

我试图实现黄色背景''但是它没有隐藏右侧曲线上的黄色背景？请建议我如何隐藏在曲线背景上溢出的右侧黄色背景。

HTML：

.header {
  display: block;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.header-background {
  background: #1d637d;
  border-radius: 50%;
  position: absolute;
  top: -50%;
  right: 0;
  bottom: -50%;
  left: -100%;
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 40px;
}

.header-content1 {
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 40px;
  background-color: yellow;
  width: 100%;
}

.header-content>p {
  color: #fff;
}

<div class="header">
  <div class="header-background"></div>
  <div class="header-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    </p>
    <div class="header-content1">
      <p>Click</p>

    </div>
  </div>

Answer 1

这可能会有所帮助

.header {
  display: block;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.header-background {
    background: #1d637d;
    border-radius: 50%;
    position: absolute;
    top: -50%;
    right: 0;
    bottom: -50%;
    left: -100%;
    z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 40px;
}
.header-content1 {
    position: relative;
    z-index: 2;
    padding-left: 10px;
    padding-right: 18px;
    background-color: yellow;
    width: 100%;
    border-radius: 0 0 20px 0;
    cursor: pointer;
}

.header-content > p {
  color: #fff;
}

<div class="header">
  <div class="header-background"></div>
  <div class="header-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    </p>
  <div class="header-content1">
    <p>Click</p>

  </div>
</div>