Css - 手镯形曲线div /按钮

Question

需要使用css获取按钮/ div

任何提示？

谢谢！

Answer 1

只有css：

button { border: none; background: transparent; cursor: pointer; }
.it {
  width: 30rem;
  height: 3rem;
  border-radius: 50%;
  background: #db601b;
  border: 2px solid #707f92;
  position: relative;
  z-index: 1;
}

.it.i {
  z-index: 3;
  background: #e9a076;
  border: 2px solid #a78d84;
}


.aver {
  background:#db601b;
  height: 5rem;
  width: 30rem;
  border-left: 2px solid #707f92;
  border-right: 2px solid #707f92;
  margin: -1.7rem 0;
  position: relative;
  z-index: 2;
}

<button>
  <div class="it i"></div>
  <div class="aver"></div>
  <div class="it"></div>
</button>