How to Generate a Box-Shadow That Follows the Shape of a Clip-Path Polygon

Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?

You can use a filter on the containing div, try:

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

eg: https://plnkr.co/edit/kePuv7OLQwawPjiBLg3J?p=preview

Firefox clip-path + box-shadow bug

Turns out, it's indeed a bug in firefox. Here is the bugzilla issue

Is it possible for an element to have a custom shape and box-shadow at the same time?

You can use filter: drop-shadow which will apply a drop-shadow on the image item as box-shadow will add shadow around the elements frame.

.trapezium-a {
border-bottom: 100px solid #333;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
filter: drop-shadow(0 6px 13px #000);
}
<div class="trapezium-a"></div>

CSS Polygon Shadow

As it was said in the comments, you need 2 nested elements for this, the inner for the clipping and the outer for the shadow.

body {  background-color: gray;}
.navigation { filter: drop-shadow(0 15px 30px rgba(0, 0, 200, 0.5));}
.innernav { /* PATH */ clip-path: polygon(0 0, 100% 0, 100% 100px, 50% 100%, 0 100px); /* OTHERS */ background-color: silver; color: white; height: 150px; position: fixed; text-align: center; top: 0; width: 100%; z-index: 100;}
.main { padding: 200px 20px 0; text-align: center;}
<nav class="navigation"><div class="innernav">Hi, I'm a nav.</div></nav>
<main class="main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quia velit modi veniam! Velit fuga facilis blanditiis iure aperiam cumque quasi officia quaerat dignissimos neque repellat quisquam voluptates sequi, hic?</p></main>

How to add border in my clip-path: polygon(); CSS style

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

div {
display: inline-block;
height: 200px;
width: 200px;
border: 3px solid;
background: darkseagreen;
}
div + div {
-webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}
<div></div>
<div></div>

How can I combine a circle in a polygon using clip-path and add a shadow

It is possible to 'cut holes' using the mask-image property and radial-gradients.

This snippet uses your code but replacing the clip-path with circle radial-gradient masks. Obviously you can change the percentages depending on hole-size required.

body {
background: cyan;
}

.ticket {
background-color: blue;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
--mask1: radial-gradient(circle at 0 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
--mask2: radial-gradient(circle at 100% 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
/* webkit needed for Chrome */
-webkit-mask-image: var(--mask1), var(--mask2);
mask-image: var(--mask1), var(--mask2);
}
<div class="ticket"></div>

box-shadow not showing on div element

Clip path is cutting off your shadow. A workaround for this is to create a parent div for the element, then put the box-shadow on that. Then use filter to follow the path of your imagem-container (otherwise it will be a square box shadow). This article might help: https://css-tricks.com/using-box-shadows-and-clip-path-together/

How to use clip-path property for border in css

add some gradient to fill the missing spaces:

.test {
background: red;
width: 100px;
height: 100px;
box-sizing:border-box;

/* CORNERS */
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.test:hover {
--grad:transparent 49.5%,green 50%;
background:
linear-gradient(to top right ,var(--grad)) top right,
linear-gradient(to top left ,var(--grad)) top left,
linear-gradient(to bottom right,var(--grad)) bottom right,
linear-gradient(to bottom left ,var(--grad)) bottom left,
white;
background-size:13px 13px; /* 10px of the clip-path + 3px of border */
background-repeat:no-repeat;
background-origin:border-box;
cursor: pointer;

border: 3px solid green;
}
<div class='test'>
</div>


Related Topics



Leave a reply



Submit