Creating a Text Design with a Right Arrow Symbol using HTML and CSS

I am looking to create a minimalist design using bootstrap, html, and css. The design should resemble the image found at this link: https://i.sstatic.net/WIgHJ.png

I have attempted the following code to achieve the design:


    <div class="container mt-5">
        <div class="row">
            <div class="col-3">
                
                <ul class="list-unstyled lists">
                    <li>Initial Meeting</li>
                    <li>Pre Test</li>
                    <li>Application for Job</li>
                    <li>Legal Screening</li>
                    <li>Additional Processing</li>
                    <li>Schedule for Training</li>
                </ul>
                
            </div>
        </div>
    </div>

The corresponding css is as follows:

.container{
   margin-top:200px;
 }
 .lists{
    border:1px solid #000;
}
.lists li{
 background:#e1ddd3;
 color:#333;
 font-weight: bold;
 font-family: 'Rajdhani', sans-serif;
 font-stretch: normal;
 font-style: normal;
 line-height: 1.5;
 letter-spacing: normal;
 height: 40px;
 position: relative;
 margin:10px;
 padding:10px 20px;
}
.lists li:before {
 content: "";
 position: absolute;
 right: -20px;
 bottom: 0;
 width: 0;
 height: 0;
 border-left: 20px solid #e1ddd3;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
}

However, I am struggling to add a background line behind the list items. If anyone could review this and suggest a solution, I would greatly appreciate it.

Answer №1

If you want to add a pseudo element to style the .lists class, you can easily do so by following these CSS rules:

.container{
   margin-top:200px;
 }
 .lists{
    /*border:1px solid #000;*/
    position: relative;
}
.lists li{
 background:#e1ddd3;
 color:#333;
 font-weight: bold;
 font-family: 'Rajdhani', sans-serif;
 font-stretch: normal;
 font-style: normal;
 line-height: 1.5;
 letter-spacing: normal;
 height: 40px;
 position: relative;
 margin:10px;
 padding:10px 20px;
}
.lists li:before {
 content: "";
 position: absolute;
 right: -20px;
 bottom: 0;
 width: 0;
 height: 0;
 border-left: 20px solid #e1ddd3;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
}


.lists::before {
    content: '';
    width: 80%;
    height: 110%;
    border: 1px solid red;
    position: absolute;
    top: -5%;
    left: 10%;
    border-radius: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-5">
        <div class="row">
            <div class="col-8">
                
                <ul class="list-unstyled lists">
                    <li>Initial Meeting</li>
                    <li>Pre Test</li>
                    <li>Application for Job</li>
                    <li>Legal Screening</li>
                    <li>Additional Processing</li>
                    <li>Schedule for Training</li>
                </ul>
                
            </div>
        </div>
    </div>

Answer №2

To create a stylish border around the element with the class .lists, you can use an absolute position pseudo element called :after. Here is an example of how you can achieve this:

.lists:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    top: -10px;
    left: 40px;
    height: 105%;
    width: 75%;
    display: block;
    border: 1px solid #888;
    border-radius: 10px;
    z-index: -1;
}

Check out this Codeply for a live example.

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

Library of CSS styling information

Has anyone come across a reliable javascript library that can retrieve the original style (not computed) of a specific element in the DOM? Essentially, I am looking for something that can provide results similar to what is displayed in Firebug's style ...

What is the correct way to align these two blocks side by side?

I have an image (https://i.stack.imgur.com/v71LR.png) and I'm trying to achieve a similar layout. Currently, my approach involves using two divs - one for the left column (containing the image) and one for the right column (with heading and paragraph ...

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

What could be the reason for this tag showing up empty after being parsed with beautiful soup?

Currently utilizing beautiful soup to parse through this particular page: In an effort to retrieve the total revenue for 27/09/2014 (42,123,000) which is among the primary values at the top of the statement. Upon examining the element in chrome tools, it ...

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML scrip ...

Tips for effectively utilizing the :valid pseudo-class in Material-UI components to dynamically alter the border styling

Currently, I am attempting to adjust the border color of Mui TextFields using createTheme from Mui v5 when the input is valid. The border itself is defined within the ::before and ::after pseudoclasses. For the TextFields, I am utilizing variant="stan ...

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

Ways to ensure the background color stretches the entire length of the page

I've been attempting to create a background image or color that extends across the entire main content area, but haven't had any success so far. For reference, please visit My attempts have involved adding a class called fill to the container-f ...

"Exploring the world of CSS3: Arrow shapes and animated effects

Looking at the image provided, my task is to create and animate it. I was considering using CSS3 border-radius instead of an actual image. Below are the HTML and CSS code that I have so far. The animation I envision involves the arrow gradually appearing ...

Looking to include a delete button for removing the currently selected tab in a Bootstrap tabs component

Currently, I am in the process of developing a travel website and have encountered an issue with implementing Bootstrap tabs in the admin section. I have managed to tackle some aspects, such as dynamically creating tab options. The problem arises when t ...

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

Featuring my Cookie page prominently on my website's homepage

I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

Using Javascript to move the cursor within an editable table before saving the row

I have a Javascript code where I can navigate a table using the up, down, and enter keys. It works perfectly, but I want to enhance it by allowing the cursor to move left and right within the same row. Is there a way to achieve this? I attempted implement ...

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

Modify an HTML document using a PHP script

I am creating a website that automatically generates an HTML template with some customizable text through a form. However, I want the ability to retrieve that text in the form after pressing a button or taking some action, so it can be edited. I've ...

PHP image retrieval is not functioning correctly and the image is not appearing as it

I'm facing some challenges when it comes to displaying images with PHP. I attempted to use this solution from Stack Overflow, but unfortunately, the image is still not appearing correctly. Within my PHP file that deals with the HTML layout, the code ...

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...