Как создать jumbotron / героя с фоновым изображением / цветом выреза шеврона на одной стороне? - PullRequest
Новая
       66

Как создать jumbotron / героя с фоновым изображением / цветом выреза шеврона на одной стороне?

0 голосов
/ 26 апреля 2020

Как я могу получить раздел героя / жумботрона с фоновым изображением с правой стороны, у которого с левой стороны есть вырез шеврона?

См. Приведенный ниже макет ...

enter image description here

Вот моя HTML разметка для раздела за вычетом любого фонового изображения ниже. Я использую Bootstrap 4. Ответы, придерживающиеся этого, являются благоприятными ... 

<div class="jumbotron-fluid bg-dark d-flex  text-white  px-3" style="height:400px; ">

    <div class="container align-self-center pl-0">

        <div class="row">

            <div class="align-self-center col-xs-12 col-sm-12 col-md-9 col-lg-5 col-xl-12 pb-5">
                <h5>Blurb goes here</h5>

                <h1 class="display-4 pb-3">Jumbotron</h1>

                <p class="lead text-muted pb-0 mb-0">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>

            </div>

        </div>

    </div>

</div>

Вероятный ответ включает добавление второго столбца .col-lg-7 и применение к нему эффекта, а не применение эффект в целом .jumbotron.

Вторичный вариант должен позволять показывать правую колонку Bootstrap color bg-danger (красный), а не изображение ...

enter image description here

Я не хочу вручную редактировать изображение для обеспечения прозрачности; Я хочу сделать это в HTML / CSS.

...