How to create eyebrow shape with css

Question

I am trying to create a shape something like this.

This is the shape of the eyebrow in my case. I tried it with clip-path property. this way I am having a sharp turn on the eyebrow border which I want to avoid. I think there must be a way to achieve this.

.avatar__eyebrow {
    margin: 100px;
    width: 52px;
    height: 25px;
    background: #000;
    clip-path: polygon(57% 6%, 84% 0, 100% 14%, 97% 36%, 87% 51%, 55% 57%, 28% 72%, 0 100%, 25% 39%, 42% 23%);
  }

user_8620333 · Answer

One approximation using multiple background:

.eyebrow {
  width: 200px;
  height: 150px;
  display: inline-block;
  margin: 5px;
  border-top-right-radius: 13%;
  background: 
   radial-gradient(farthest-side at top left, transparent 98%, #fff 100%) 100% 19%/29px 16% no-repeat,
   radial-gradient(116% 70%  at bottom right, #fff 99%, transparent 100%), 
   radial-gradient(107% 100% at bottom right, #000 99%, transparent 100%);
}

/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}

.mouth {
  width: 55px;
  height: 10px;
  background: #000;
  border-radius: 20px;
  position: relative;
  margin-left: 190px;
  transform: rotate(-14deg);
  margin-top: 18px;
}

To understand the puzzle change the coloration and add some border:

.box {
  width:200px;
  height:150px;
  display:inline-block;
  margin:5px;
  border-top-right-radius:13%;
  border:2px solid blue;
  background:
    radial-gradient(farthest-side at top left,green 98%,red 100%) 100% 19%/29px 16% no-repeat,
    radial-gradient(116% 70% at bottom right,pink 99%,transparent 100%),
    radial-gradient(107% 100% at bottom right,#000 99%,transparent 100%);
}


/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}

body  {
  background:yellow;
}

With mask to have full transparency:

.eyebrow {
  width:200px;
  height:150px;
  display:inline-block;
  margin:5px;
  border-top-right-radius:13%;
  background: radial-gradient(107% 100% at bottom right,#000 99%,transparent 100%);
  -webkit-mask:
    radial-gradient(farthest-side at top left,transparent 98%,#fff 100%) 100% 19%/29px 16% no-repeat,
    radial-gradient(116% 70% at bottom right,transparent 98%,#fff 100%);
 -webkit-mask-composite: destination-out;
 mask:
    radial-gradient(farthest-side at top left,transparent 98%,#fff 100%) 100% 19%/29px 17% no-repeat,
    radial-gradient(116% 68% at bottom right,transparent 98%,#fff 100%);
 mask-composite: exclude;
    
}

/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}
.mouth {
  width: 55px;
  height: 10px;
  background: #000;
  border-radius: 20px;
  position: relative;
  margin-left: 190px;
  transform: rotate(-14deg);
  margin-top: 18px;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

How to create eyebrow shape with css

1 Answers