How to add Shadow to Triangle made with css `clip-path`? - css

Question

i have created A triangle with css clip-path property to have few content inside.
.triangle {
background-color: grey;
-webkit-clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
img {
width: 100%;
position: relative;
left: 0;
top: 5%;
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
width: 110%;
}
}
&::after {
background-color: black;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity .5s;
opacity: 0;
}
}
i have put few content inside and for hover border effect i have created another triangle hidden back of this triangle.
I want to have SHADOW arround this triangle on hover. as shown in image given below.
I have tried ::before but not working, and everyother solution avaialable is not working with clip-path triangle.

Answer 1

Here is an idea without clip-path where the trick is to rely on cascading skew transformation to create the triangle shape and to keep the initial aspect of the content:
.tri {
margin: 40px;
width: 250px;
height: 200px;
border-left: 2px solid orange;
border-bottom: 2px solid orange;
overflow: hidden;
transform-origin: bottom;
transform: skewX(-32deg);
filter:drop-shadow(0 0 5px red);
}
.tri>.container {
height: 100%;
border-right: 2px solid orange;
overflow: hidden;
transform: skewX(51.35deg);
transform-origin: bottom;
}
.tri>.container>div {
transform-origin: bottom;
transform: skewX(-32deg);
height: 100%;
/* Irrelevant styles */
text-align: center;
display: flex;
flex-direction: column;
justify-content:center;
color:#fff;
background:
linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),
url(https://picsum.photos/id/10/1000/800) center/cover;
}
body {
background:grey;
}
<div class="tri">
<div class="container">
<div>
<h1>Title</h1>
<p>some text here</p>
</div>
</div>
</div>

Answer 2

Just add a parent element to triangle and add drop-shadow to the parent element.
Try this:
.triangleParent {
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
}
.triangle {
background-color: grey;
-webkit-clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
}
.triangle img {
width: 100%;
position: relative;
left: 0;
top: 5%;
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
width: 110%;
}
}
.triangle::after {
background-color: black;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity .5s;
opacity: 0;
}
<div class="triangleParent">
<div class="triangle">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
</div>