Делаем перекошенные элементы на изображении прозрачными - PullRequest
Новая
       4

Делаем перекошенные элементы на изображении прозрачными

0 голосов
/ 01 мая 2018

Я пытался следовать руководству на Youtube, чтобы помочь с этим, и я могу заставить его работать - вроде.

Я пытаюсь поместить два элемента div в раздел, где верхний - для размещения изображения, а нижний - для текста и т. Д.

Мне бы хотелось, чтобы верхняя часть имела скошенный провал бритвы в середине, так что изображение как бы сливается с нижним делителем.

Мне удалось сделать наклонные элементы и разместить их там, где я хочу, но я, когда я поворачиваю их прозрачными, они, кажется, исчезают.

Пример: https://imgur.com/DsqNvZI

Мой CSS: 

.section_1 {
    height: 800px;
    width: auto;
    background: red;
}

.section_image {
    height: 400px;
    width: auto;
    background: green;
    position: relative;
    background-image: url(lolsovs.jpg);
}

.section_image::after, .section_image::before {
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    background: green;
    z-index: 100;
    bottom: -1em;
}

.section_image::after {
    left: 50%;
    transform: skew(0, -20deg);
    z-index: 100;
}

.section_image::before {
    right: 50%;
    transform: skew(0, 20deg);
}

.section_text {
    background: purple;
    height: 400px;
    width: auto;
    z-index: -100;
}

Я все еще новичок, когда дело доходит до всего этого, так что будь осторожен со мной!

Заранее спасибо!

1 Ответ

0 голосов
/ 01 мая 2018

но я, когда я поворачиваю их прозрачными, они, кажется, исчезают.

Что логично, поскольку вы сделали их прозрачными. Я советую вам рассмотреть другой способ достижения этого. Вы можете просто рассмотреть линейный градиент, чтобы закрасить нижнюю часть, чтобы эта прозрачная часть была сверху: 

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:-50px;
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - 21px) 0/40px 50px no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + 20px) 0/40px 50px no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 50px/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom">

</div>

А для лучшей обработки вы можете использовать переменную CSS для регулировки размера: 

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:calc(-1 * var(--h,50px));
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 var(--h,50px)/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom" style="--h:80px;--w:100px">

</div>
...