html - Css - 手镯形曲线 div/button

Question

需要为按钮/div 使用 css 来实现此目的

有什么提示吗？

谢谢!

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>