Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

I have been working on the following HTML layout using Bootstrap 4, but I've hit a snag with one element.

Check out the design preview below:

https://i.sstatic.net/V3tzT.png

The HTML code is as follows:

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

htmlcssbootstrap-4

Answer №1

By adding a class named "custom-down-arrow" and using the :after pseudo-element along with some CSS, I was able to create a custom down arrow.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a div element dynamically when an option is selected using AngularJS

I'm having trouble dynamically creating div elements based on the selected option value, but for some reason ng-repeat isn't working as expected. Can you help me figure out what I'm missing? Here's the HTML snippet I'm using - &l ...

javascriptjqueryhtmlcssangularjs

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable

AngularJS - varying actions based on which input field I interacted with first

Here is the tutorial I referenced for this code: <!DOCTYPE html> <html> <head> <title>AngularJS Tutorials</title> <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> </head> <body> & ...

javascripthtmlangularjs

What strategies can be implemented to increase the number of backlinks?

<script type="text/javascript"> $(document).ready(function() { var linkas = $("#button").attr("value"); $('#button').click(function(){ $.get(linkas, function(data){ $(' ...

jquerybuttonhtmlhyperlink

What steps can I take to embed a video in HTML without autoplaying in a browser?

I have a simple but important question that I need help with. I am creating a compilation of family videos and I want to put them all on one page or in an HTML file. However, when I embed/link a directory file of the video into the HTML, it automatically ...

html

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

htmlcssmarginline-height

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Utilizing jQuery to pinpoint elements with personalized data attributes

I am struggling with a few elements that look like this <p data-lang-bg="Bulgarian" data-lang-en="English" >Text</p> <p data-lang-bg="Other bulgarian text" data-lang-en="Other english text" >Text 2</p> How can I write a jQuery sel ...

jqueryhtmlcss-selectorsjquery-datacustom-data-attribute

What are some creative ways to enhance closePath() in canvas styling?

Currently, I am faced with the challenge of styling the closePath() function on my canvas. Specifically, I would like to apply different stroke styles to each line segment. For now, let's focus on changing colors for each line. In the example below, y ...

javascripthtmlcanvas

Is it beneficial to utilize CSS3 hardware acceleration translate3d for benchmarking purposes? Is it advisable to implement it on the body element

While browsing through content, I stumbled upon a query regarding the impact of transform: translate3d(0,0,0) or transform: translateZ(0) on enabling CSS3 hardware acceleration for animations across different platforms and browsers. It mentioned that combi ...

htmlcsswebkitcss-transformshardware-acceleration

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

phphtml

"Mobile responsiveness issue: HTML email template table not aligning properly at the bottom on

Hello community, how is everyone doing? I'm currently working on creating my own HTML Email templates, but I'm facing some challenges with responsiveness. On desktop devices, the email looks like this: https://i.sstatic.net/X8vfu.png However, ...

htmlcss

What methods do HTML document Rich Text Editors use to incorporate rich text formatting features?

I am curious about the way text in the textarea is styled in rich-text editors. I have attempted to style text in the form but it doesn't seem to change. How does JS recognize the characters typed by the user? Can you explain this process? Edit: Aft ...

javascripthtmlcssdomrichtext

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

htmlcss

Navigating through various folders to access files in HTML

I am facing an issue with my folder structure and includes in my PHP files: index.php includes/header.php includes/conn.php contents/ad_list.php contents/ad_posting.php In my index.php, I successfully included includes/header.php. However, in contents/a ...

phphtml

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

cssvue.jsvue-componentbootstrap-vuescrollspy

Is it possible to create this Mobile/Desktop design using Bootstrap (or another grid system)?

I am currently utilizing Twitter Bootstrap 3 to design a website that is optimized for mobile devices. I want two elements (#1 and #2 as shown in my sketch) to appear in a sidebar on the left side of the screen when viewed on a large display, while the mai ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

Is there a way to style alternate iframes using CSS?

I need to select every second iframe in the image provided. Is it possible to achieve this using nth-child? I have tried with the following code (unsuccessfully): #main iframe:nth-child(2n+2) ...

csscss-selectors

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

javascriptcssreactjsmaterial-ui