如何在css中将圆的一部分设置为背景

Question

我想把圈子的一部分作为背景

我想要的是什么：

示例：

我试图通过border-radius获得此功能，但它始终无法正常工作。

以下是我的尝试：

a{
  min-width: 80px;
  height: 60px;
  padding: 20px 15px !important;

  // active/current navigation link
  &.active, &:hover{
     background-color: #e15669;
    &:before{
      position: absolute;
      content: '';
      display: block;
      height: 60px;
      width: 30px;
      border-radius: 90px 0 0 90px;
      -moz-border-radius: 90px 0 0 90px;
      -webkit-border-radius: 90px 0 0 90px;
      background: #e15669;
      top: 0;
      left: -30px;
      z-index: -1;
    }
    &:after {
      position: absolute;
      content: '';
      display: block;
      height: 60px;
      width: 30px;
      border-radius: 0 90px 90px 0;
      -moz-border-radius: 0 90px 90px 0;
      -webkit-border-radius: 0 90px 90px 0;
      background: #e15669;
      top: 0;
      right: -30px;
      z-index: -1;
    }
  }
}

Answer 1

使用径向渐变为背景着色

body {
  text-align: center;
}
a {
  padding: 1em;
  display: inline-block;
  text-decoration: none;
  margin: 2em;
  color: white;
  background: radial-gradient(circle farthest-side, red, red 90%, transparent 90%);
}

<a href="#1">RANDOM</a>

<a href="#2">RANDOM TEXT</a>

<a href="#3">TEXT</a

替代解决方案

定位的伪元素。这样可以轻松转换背景。

body {
  text-align: center;
}
a {
  padding: 1em;
  display: inline-block;
  text-decoration: none;
  margin: 2em;
  color: white;
  position: relative; /* positioning context */
  overflow: hidden; /* required to clip circle */
}
a::before {
  content: '';
  position: absolute; /* doesn't affect other elements */
  top: 50%; /* set 50% down */
  transform: translateY(-50%); /* pull up 50% of own height */
  width: 100%;
  left: 0;
  background: green;
  padding-bottom: 100%; /* makes square */
  border-radius: 50%; /* round it off */
  z-index: -1;
  transition:background .35s ease;
}

 a:hover::before {
   background: blue;
 }

<a href="#1">RANDOM</a>

<a href="#2">RANDOM TEXT</a>

<a href="#3">TEXT</a>

Answer 2

您可以尝试这样：

＆＃13;

＆＃13;

.a {
height: 100px;
width: 100px;
text-align:center;
background-color: red;
line-height:100px;
border-top-left-radius: 100%50px;
border-top-right-radius: 100%50px;    
border-bottom-left-radius: 100%50px;
border-bottom-right-radius: 100%50px;    
}

＆＃13;

<div class="a">Hello</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

基于您的代码的解决方案

a {
  display: inline-block;
  min-width: 80px;
  height: 60px;
  padding: 20px 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
a.active:before, a:hover:before {
  position: absolute;
  content: '';
  display: block;
  height: 200%;
  width: 100%;
  border-radius: 50%;
  background: tomato;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}

<a href="#">hello mate</a>
<hr>
<a class="active" href="#">active status</a>

更新回答

a {
  display: inline-block;
  min-width: 80px;
  padding: 20px 15px;
  box-sizing: border-box;
  position: relative;
}
a.active:before,
a:hover:before {
  position: absolute;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 12px/30px;
  background: tomato;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}

<a href="#">hello mate</a>
<hr>
<a class="active" href="#">active status</a>