如何使用 html 和 css 在右箭頭符號內創建文本設計

Question

我想在引導程序 html 和 css 的幫助下創建一個簡單的設計，設計如下所示：

我嘗試了以下代碼來設計：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>

css 是：

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

但無法給出列表項后面的背景線，請任何人看看這個並提出上述解決方案。

Answer 1

在 .lists :after使用絕對的.lists偽元素。 例如：

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

代碼

Answer 2

您可以在.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>