Блог

Главная - Вопросы по программированию - Как добавить значок стрелки с объектами CSS и сделать его отзывчивым

Как добавить значок стрелки с объектами CSS и сделать его отзывчивым

#html #css #bootstrap-4

Вопрос:

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

Вот предварительный просмотр дизайна:

введите описание изображения здесь

HTML:

 <section class="hm_sc_1">
    <div class="container">
        <div class="row no-gutters p-5 align-items-center" style="background: #a4186c;">
            <div class="col-sm-12 col-md-12 col-lg-4 text-center ">
                <img src="images/4632.png" alt="img-fluid" class="p-3 w-100">
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8 p-5">
                <h4 style="font-size: 20px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi
                    fugiat atque dolores cum nesciunt.</h4>
            </div>
        </div>
        <div class="row no-gutters p-5 align-items-center" style="background: #f6e1ec;">
            <div class="col-sm-12 col-md-12 col-lg-4 text-center">
                <img src="images/54332.png" alt="img-fluid" class="p-3 w-75">
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8">
                <h4 class="pt-0 pr-4 pb-4 pl-5" style="font-size: 20px; color: #251F3B;">Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Dignissimos, labore. Quidem quasi officiis</h4>
                <div class="pt-0 pr-4 pb-4 pl-5">
                    <p style="font-size: 16px; color: #251F3B;">Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Est provident quisquam praesentium esse explicabo porro sed aperiam unde natus fuga
                        expedita cupiditate, at numquam animi quos nihil, itaque molestias! Eveniet!</p>
                </div>
            </div>
        </div>
    </div>
</section>

Комментарии:

1. Вы можете использовать псевдоэлемент для создания стрелки.

2. либо псевдоэлемент, либо svg-паттинг

3. Но как поместить стрелку в нижней части седла?

Ответ №1:

я добавляю класс, вызываемый "custom-down-arrow" стрелкой вниз, используя «:после» и css для него.

 .custom-down-arrow:after {
    bottom: -22px;
    left: 150px;
    border-width: 11px;
    border-color: #a4186c transparent transparent transparent;
    border-style: solid;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

.custom-down-arrow {
    position: relative;
} 
 <section class="hm_sc_1">
    <div class="container">
        <div class="custom-down-arrow row no-gutters p-5 align-items-center" style="background: #a4186c;">
            <div class="col-sm-12 col-md-12 col-lg-4 text-center ">
                <img src="images/4632.png" alt="img-fluid" class="p-3 w-100">
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8 p-5">
                <h4 style="font-size: 20px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi
                    fugiat atque dolores cum nesciunt.</h4>
            </div>
        </div>
        <div class="row no-gutters p-5 align-items-center" style="background: #f6e1ec;">
            <div class="col-sm-12 col-md-12 col-lg-4 text-center">
                <img src="images/54332.png" alt="img-fluid" class="p-3 w-75">
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8">
                <h4 class="pt-0 pr-4 pb-4 pl-5" style="font-size: 20px; color: #251F3B;">Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Dignissimos, labore. Quidem quasi officiis</h4>
                <div class="pt-0 pr-4 pb-4 pl-5">
                    <p style="font-size: 16px; color: #251F3B;">Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Est provident quisquam praesentium esse explicabo porro sed aperiam unde natus fuga
                        expedita cupiditate, at numquam animi quos nihil, itaque molestias! Eveniet!</p>
                </div>
            </div>
        </div>
    </div>
</section>
Метки: