Ben Ben -4 years ago 226
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:

.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 Source

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">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download