не прямоугольное наложение изображения

Question

Я не могу понять это. У меня есть загрузочная карта, которая на 100% заполнена изображением. В верхней части изображения у меня есть текст, который четко виден с помощью прозрачного наложения прямоугольника. Мне бы хотелось, чтобы наложение прозрачного прямоугольника было наклонным, поэтому я получаю эффект, аналогичный карточкам на https://www.evensi.com домашней странице.

Моя карта HTML

<div class="card border-0" style="width:100%;">
<img class="card-img-top" src="IMAGE HERE" alt="Card image">
<div class="card-img-overlay">
</button>
<div class="bottom text-light">
SOME TEXT OVER IMAGE HERE
</div>
</div>
</div>

Стилизация карт

    .card {
        box-shadow: 1 3px 1px 1 rgba(1, 1, 3, 0.6);
        transition: 0.3s;
        width: 100%;
        border-radius: 15px;
        padding: 3px;
    }

    .card:hover {
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4);
    }

    /* Card image dark filter */
    .card-img-top {
        width: 100%;
        height: 350px;
        object-fit: cover;
        /* photo brightness */
        filter: brightness(85%);
        border-radius: 15px;
        padding: 2px;
    }

    /* Align heading text to bottom of photo */
    .bottom {
        position: absolute;
        right: 0;
        left: 0;
        padding: 15px;
        bottom: 0px;
        padding-bottom: 15px;
        /* shaded filter overlay */
        background-color: rgba(12, 23, 23, 0.6);

        /* background-color: black; */
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

Answer 1

3 способа иметь наклонный контейнер:

• использовать transform: rotate ();на элементе, отдельном от вашего текстового контейнера.
• используйте псевдоэлементы :: before или :: after
• используйте background-image файла .png, чтобы у вас была прозрачность в вашем текстовом контейнере.

Псевдоэлементы :: before и :: after должны быть присоединены к желаемому элементу, например, div, например. Они также должны иметь свойство content , иначе они вообще не будут отображаться.

div::before {
  content: "";
}

Их родительским элементом считается элемент, к которому они присоединены, то есть div в этом примере. Таким образом, вы можете легко использовать абсолютное позиционирование, чтобы расположить его в соответствии с вашими потребностями.

Я сделал скрипку на примере карты. https://jsfiddle.net/vbgrn98s/1/

Вам придется поиграть со свойством border-width, чтобы настроить его размер в соответствии с вашими потребностями.