如何将阴影添加到使用 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;
            }
      }

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

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

我已经尝试 ::before 但没有用，而且所有其他可用的解决方案都不适用于剪辑路径三角形。

Answer 1

只需将父元素添加到 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>

Answer 2

这是一个没有 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>

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

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

css

clip-path