如何使用 CSS 实体添加箭头图标并使其响应

Question

I am developing the below HTML with Bootstrap 4 and I am stuck in one element part of the HTML.

Here is a preview of the design:

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>

Answer 1

i add class called "custom-down-arrow" for down arrow using ":after" and css for it.

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