如何为使用 css `clip-path` 制作的三角形添加阴影？

Question

我创建了一个带有 css clip-path 属性的三角形，里面的内容很少。

.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;
            }
      }

我在里面放了一些内容，为了悬停边框效果，我创建了另一个隐藏在这个三角形后面的三角形。

我想让 SHADOW 在悬停时围绕这个三角形。如下图所示。

我已尝试::before 但无法正常工作，并且所有其他可用的解决方案都无法使用剪辑路径三角形。

Answer 1

这是一个没有clip-path 的想法，其中诀窍是依靠级联倾斜变换来创建三角形并保持内容的初始方面：

.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

只需将父元素添加到triangle 并将drop-shadow 添加到父元素。

试试这个：

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