Кажется, я не могу понять этого. У меня есть загрузочная карта, которая на 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;
    }
0
justphptogo 29 Окт 2019 в 13:03

1 ответ

Лучший ответ

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

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

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

div::before {
  content: "";
}

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

Я поигрался с примером карты. https://jsfiddle.net/vbgrn98s/1/

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

0
Ivana G.B. 29 Окт 2019 в 11:34