How make triangle div with css [duplicate] - html

Question

This question already has answers here:
How to make this arrow in CSS only?
(5 answers)
Closed 6 years ago.
How can i achieve the effect in the below image using css
parent div with divs with triangle egde like in the picture below. if i can achieve this with JS am also open to any good idea

Answer 1

* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #999;
}
nav a {
display: block;
padding: 14px 20px;
position: relative;
z-index: 1;
}
nav li a:before {
content: " ";
position: absolute;
right: 3px;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #eee;
z-index: -1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>
Or you can even simplify it by using one psudo element and using the border property
* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.25);
margin: 15px;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0px;
top: -1px;
bottom: 0;
width: 30px;
transform: rotate(45deg);
background: transparent;
height: 30px;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
nav a {
display: block;
padding: 5px 20px;
position: relative;
z-index: 1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>

Answer 2

Try this one
HTML
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
CSS
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }