NeosFox NeosFox - 4 months ago 15
Sass (Sass) Question

how to set part of circle as background in css

I am trying to get part of circle as back ground

What I want :

enter image description here

Example:

enter image description here

enter image description here

enter image description here

I tried to get this by

border-radius
but it doesn't work always.

Here is what I tried:

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

Use a radial gradient to color the background like so

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

Alternate solution

A positioned pseudo-element. This allows for transitioning the background easily.

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>

Comments