I did not know a better title to describe my need, but in fact, I would like to be able to make a sequence of boxes whose right border is in a triangular format, superimposed on the subsequent box.
So:
My idea is to put a text centered on each of the items indicated by different colors above, in a kind of rule for status.
What would be the most efficient way to do this with CSS?
One of the traditional ways is to use the border triangle:
.breadcrumb {
display:inline-block;
position:relative;
line-height:30px; /* altura final da linha */
text-align:center;
padding-right:20px;
padding-left:35px; /* 1/2 da altura da linha a mais */
/* que o right para compensar o bico */
color:#fff;
}
.breadcrumb:after {
content:"";display:block;position:absolute;
box-sizing:border-box; /* para respeitar medida interna */
top:0;bottom:0;left:100%;
border:solid 15px transparent; /* metade da altura da linha */
z-index:1;
}
.blue {background:blue} .blue:after {border-left-color:blue}
.gold {background:gold} .gold:after {border-left-color:gold}
.green{background:green} .green:after{border-left-color:green}
.red {background:red} .red:after {border-left-color:red} <span class="breadcrumb blue">UM</span><!--
--><span class="breadcrumb gold">DOIS</span><!--
--><span class="breadcrumb green">TRÊS</span><!--
--><span class="breadcrumb red">QUATRO</span>This is just a demonstration of the technique, the important thing to note is the use of the pseudo-element, and the border.
In this case, I used <span> to simplify (so the comments to kill line break), you have to choose the most appropriate display for your case. About the spacing of the elements, you have this post here:
.wrapper {
margin-top: 30px;
}
ul.menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul.menu li {
width: 200px;
display: inline-block;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 14px;
font-family: "Roboto";
font-weight: bolder;
color: #000;
text-shadow: #fff 1px 1px 5px;
position: relative;
}
ul.menu li:after {
position: absolute;
content: "";
right: -12px;
top: 0;
bottom: 0;
height: 25px;
width: 24px;
background-color: #000;
margin: auto;
transform: rotate(45deg);
z-index: 1;
}
ul.menu li:first-child {
background-color: #b4be35;
}
ul.menu li:first-child:after {
background-color: #b4be35;
}
ul.menu li:nth-child(2) {
background-color: #ff00ff;
}
ul.menu li:nth-child(2):after {
background-color: #ff00ff;
}
ul.menu li:nth-child(3) {
background-color: #ff0000;
}
ul.menu li:nth-child(3):after {
background-color: #ff0000;
}
ul.menu li:last-child {
background-color: #00ffff;
}
ul.menu li:last-child:after {
background-color: #00ffff;
}<div class="wrapper">
<ul class="menu">
<li>Link---1</li>
<li>Link---2</li>
<li>Link---3</li>
<li>Link---4</li>
</ul>
</div>