Using 'box shadows' and clip-path together

Let's explore a CSS workaround for applying a shadow to a clipped shape. Standard box-shadow fails because the clipping cuts off the shadow. Here's how to achieve the desired effect:

Creating the Base Shape

First, we create a basic box:

.tag {
  background: #FB8C00;
  color: #222;
  font: bold 32px system-ui;
  padding: 2rem 3rem 2rem 4rem;
}

Shaping with clip-path

Next, we shape the box using clip-path:

.tag {
  /* ... */
  clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
}

The box-shadow Problem

Attempting to apply a shadow using box-shadow:

.tag {
  /* ... */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

...fails because clip-path removes the shadow outside the clipped area.

The Solution: drop-shadow on a Parent

The solution involves using the drop-shadow() filter on a parent element. Since clip-path affects only the element it's applied to, the shadow from the parent will be visible.

<div class="tag-container">
  <div class="tag">Tag</div>
</div>

.tag-container {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

.tag {
  /* ... existing styles ... */
}

Now, the drop-shadow filter applied to the parent .tag-container casts a shadow that conforms to the shape of the child .tag element, solving the problem. Using box-shadow on the parent would not work correctly as it would create a rectangular shadow.

The above is the detailed content of Using 'box shadows' and clip-path together. For more information, please follow other related articles on the PHP Chinese website!