Как добавить Shadow в Triangle с помощью css `clip-path`? - PullRequest
Новая
       23

Как добавить Shadow в Triangle с помощью css `clip-path`?

1 голос
/ 17 июня 2019

Я создал треугольник со свойством 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;
            }
      }

Я поместил немного содержимого внутрь, и для эффекта наведения границы я создал еще один треугольник, спрятанный за этим треугольником..

Я хочу, чтобы тень была вокруг этого треугольника при наведении.как показано на рисунке ниже.enter image description here

Я пробовал ::before, но не работает, и каждое другое доступное решение не работает с треугольником пути обрезки.

Ответы [ 2 ]

2 голосов
/ 17 июня 2019

Вот идея без 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>
1 голос
/ 17 июня 2019

Просто добавьте родительский элемент к 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>
...