Hey Guys!! So I want to create a triangle shape using css at the end of the list item.
I have used list group component of bootstrap to display the list
Below I have added the snippet of my code.
I have also mentioned the desired output image
I only just want to know how can I add that triangle on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assigment 6 Part2</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assignment6.css">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-4 col-md-4 col-lg-5">
<ul class="list-group list-group-flush" id="list-tab" role="tablist">
<li class="list-group-item text-lg-end active" id="list-home-list" role="tab" data-bs-toggle="list" href="#list-home" aria-controls="list-home"><i class="fas fa-couch"></i> Master Bedrooms</li>
<li class="list-group-item text-lg-end " id="list-profile-list" role="tab" data-bs-toggle="list" href="#list-profile"><i class="fas fa-utensils"></i> Breakfast Buffet</li>
<li class="list-group-item text-lg-end " id="list-home-list" role="tab" data-bs-toggle="list" href="#list-messages">Fitness Center</li>
<li class="list-group-item text-lg-end " id="list-home-list" role="tab" data-bs-toggle="list" href="#list-settings">24 hours Reception</li>
<li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Pool & Spa </li>
<li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Free Wifi</li>
<li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Resto bar</li>
</ul>
</div>
<div class="col-8 col-md-6 col-lg-6">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<h2>Master Bedrooms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt voluptate, quibusdam sunt iste dolores consequatur</p>
<p>Inventore fugit error iure nisi reiciendis fugiat illo pariatur quam sequi quod iusto facilis officiis nobis sit quis molestias asperiores rem, blanditiis! Commodi exercitationem vitae deserunt qui nihil ea, tempore et quam natus quaerat doloremque.
</p>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">h2</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">h3</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">h4</div>
</div>
</div>
</div>