how to create design of Text within right arrow symbol with html and css

Question

I want to create a simple design with the help of bootstrap, html and css the design is look like:

i have tried following code to design: html:

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

and css is:

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

but unable to give background line which is behind of list-items, please anyone have a look on this and suggest a solution for above.

Answer 1

Use an absolute position pseudo element :after the .lists . For example:

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

Codeply

Answer 2

You can use pseudo element on .lists .

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