Question

我想创建一个如链接中所示的弧形按钮。用css是可能的吗？我尝试了下面的代码，但我想删除它底部的白色部分，使它看起来像一个弧形，如图所示三江源

nav {
  width: 400px;
  height: 400px;
  background: transparent;
  border-radius: 50%;
  padding: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



.button {
  display: block;
  width: 30%;
  height: 30%;
  margin: 2%;
  position: relative;
  float: left;
  box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #FFF;
}

.button::after {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: transparent;
  position: absolute;
  border-radius: inherit;
}

.button.top {
  border-radius: 100% 0 0 0;
  background: -webkit-radial-gradient(bottom right, ellipse cover, #fff 35%, #eee 75%);
  background: radial-gradient(ellipse cover at bottom right, #ffffff 35%, #eeeeee 75%);
}

.button.top::after {
  bottom: 0;
  right: 0;
  box-shadow: inset 2px 1px 2px 0 rgba(0, 0, 0, 0.4), 10px 10px 0 10px transparent;
  -webkit-transform: skew(-3deg, -3deg) scale(0.96);
  -moz-transform: skew(-3deg, -3deg) scale(0.96);
  transform: skew(-3deg, -3deg) scale(0.96);
}

<nav>
  <a class="button top" href="#"><i class="icon-play"></i></a>
  
</nav>

创建弧形按钮，如图像链接所示

0 个答案: