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 >
<div >
<ul id="list-tab" role="tablist">
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-home" aria-controls="list-home"><i ></i> Master Bedrooms</li>
<li id="list-profile-list" role="tab" data-bs-toggle="list" href="#list-profile"><i ></i> Breakfast Buffet</li>
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-messages">Fitness Center</li>
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-settings">24 hours Reception</li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Pool & Spa </li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Free Wifi</li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Resto bar</li>
</ul>
</div>
<div >
<div id="nav-tabContent">
<div 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 id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">h2</div>
<div id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">h3</div>
<div id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">h4</div>
</div>
</div>
</div>
CodePudding user response：
You can achieve that effect using CSS border on pseudo-elements. The original code was from https://css-tricks.com/the-shapes-of-css/
.list-group-item.active {
position: relative;
}
.list-group-item.active:before {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
}<!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 >
<div >
<ul id="list-tab" role="tablist">
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-home" aria-controls="list-home"><i ></i> Master Bedrooms</li>
<li id="list-profile-list" role="tab" data-bs-toggle="list" href="#list-profile"><i ></i> Breakfast Buffet</li>
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-messages">Fitness Center</li>
<li id="list-home-list" role="tab" data-bs-toggle="list" href="#list-settings">24 hours Reception</li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Pool & Spa </li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Free Wifi</li>
<li role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Resto bar</li>
</ul>
</div>
<div >
<div id="nav-tabContent">
<div 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 id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">h2</div>
<div id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">h3</div>
<div id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">h4</div>
</div>
</div>
</div>CodePudding user response：
You can accomplish this with a css ::after pseudo-element on the selected item:
ul {
list-style: none;
padding: 0;
margin: 0;
background: tomato;
font-family: sans-serif;
color: bisque;
max-width: 200px;
}
li {
padding: 1em;
position: relative;
}
.selected::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 8px solid transparent;
border-right-color: white;
}<ul>
<li >Selected Item</li>
<li >Selected Item</li>
<li >Selected Item</li>
<li >Selected Item</li>
</ul>