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

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

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

Я бы хотел, чтобы верхний имел скошенное лезвие посередине, чтобы изображение как бы кровоточило на нижнем 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;
}

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

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

html css css-transforms

01.05.2018 17:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

but I when I turn them transparent, they seem to disappear.

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

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

Какая прекрасная вещь, ты мой добрый друг! Большое спасибо!

— 01.05.2018 17:50

@aroabarberan, пожалуйста, будьте внимательны при редактировании сообщений! ты полностью облажался с контентом

— 02.05.2018 23:29

01.05.2018 17:45

Другие вопросы по теме

HTML-файл не связан с файлом css

Попытка динамически показать скрытые в таблице стилей элементы с помощью JS

Использование Font Awesome с Bootstrap 4

Чтобы синхронизировать левую панель навигации с верхней панелью навигации

CSS Grid с прокруткой фиксированного размера: как решить проблему, при которой не отображаются нижние поля / отступы?

Центр дочернего элемента к центру его родителя

Добавить текст в угол ячейки таблицы HTML, не мешая содержимому ячейки

Материализация CSS Полоса прокрутки закрывается Выберите IE11

Связывание файлов css, js между папками проекта

Выровнять в меню параметры <li> по центру и по левому краю

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

Ответы 1

Другие вопросы по теме

Похожие вопросы