Ben Ben - 1 month ago 23
Sass (Sass) Question

How do I draw this shape in css?

I'm trying to draw this shape in scss. How do I do this?
This shape

Here's my attempt so far. Sorry, did not realize you needed to see my failed attempt: https://jsfiddle.net/5dy4Lwvf/

.shape {
width: 114px;
height: 167px;
-webkit-border-radius: 0 114px 0 16px/0 167px;
-moz-border-radius: 0 114px 0 16px/0 167px;
border-radius: 0 114px 0 16px/0 167px;
background-color: #000;
}

Answer

Create a white circle with a red shadow. Set this inside a clipping div.

Hover the snippet to see the final result

.base {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: solid 1px;
}
.inner {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-radius: 50%;
  margin: 60px -30px;
  box-shadow: 20px 30px red;
}
.base:hover {
  border-color: transparent;
}
.base:hover .inner {
  background-color: transparent;
}
<div class="base">
  <div class="inner">
  </div>
</div>