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
CSS List Item Width/Height Does Not Work
How to Match 3D Perspective of Real Photo and Object in CSS3 3D Transforms
Rounded Side, Not Rounded Corners
How to Style the Number on a HTML List
What Is Caret Symbol ^ Used for in CSS When Selecting Elements
Table Border Color in CSS with Border Collapse
Css: Background Image Does Not Fill When Scrolling
Webkit Transform Blocking Link
Bootstrap 3 Align Text to Bottom of Div
When Using @Media Queries, Does a Phone Load Non-Relevent Queries and Images
Is Vertical Text-Overflow Possible with CSS3
Media Query for Devices Supporting Hover
How to Change the Link Color in a Specific Class for a Div CSS
How to Define Specific CSS Rules for IE9 Alone
Use Justify-Content: Flex-End and to Have Vertical Scrollbar
Chrome & Safari Error::Not Allowed to Load Local Resource: File:///D:/Css/Style.Css