CSS3 - 创建折角背景

Question

试图弄清楚，如果可以在纯css中创建这样的背景？

Answer 1

我同意评论这不是请求委员会。你应该先尝试一下。

无论如何，这里是你的出发点：

＆＃13;

＆＃13;

.circle{
  width:200px;
  height:200px;
  border-radius:51%;
  transform:rotate(45deg);
  background:#A1C700;
  clip: rect(10px, 200px, 200px, 0px);
  position: absolute;
  display:table;
}

.circle:before {
    content: "";
    width: 200px;
    height: 200px;
    border-radius: 51%;
    background: #83A100;
    position: absolute;
    top: -180px;
    left: 0px;
}

span{
  display:table-cell;
  transform:rotate(-45deg);
  vertical-align:middle;
  text-align:center;
  color:white;
  font-family:sans-serif;
  font-size:20px;
  font-weight:700;
}

＆＃13;

<div class="circle"><span>Don't worry.<br>Be happy.</span></div>

＆＃13;

＆＃13;

＆＃13;

（至少下次尝试做点什么）

奖金：Animated version

（更新：clip不再尊重rotation，因此需要.container

Answer 2

我试过这种方式。 :) 但米罗的答案是最好的:) https://jsfiddle.net/ahe128/29gmrnh3/

#background{
  background:silver;
  height:300px;
  width:300px;
}
#big_circle{
  width:200px;
  height:200px;
  border-radius:50%;
  background:#99e600;
  margin-top:100px;
  left:0;
  position:absolute;
}
#small_circle{
  width:100px;
  height:25px;
  border-radius:50%;
  background:silver;
 margin-left:95px;
 margin-top:105px;
  position:absolute;
 border-bottom:25px solid #669900;
  -ms-transform: rotate(38deg); /* IE 9 */
    -webkit-transform: rotate(38deg); /* Chrome, Safari, Opera */
    transform: rotate(38deg);
    z-index:5;
}


<div id="background">

<div id="big_circle"></div>
<div id="small_circle"></div>

</div>