5
I didn’t 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 edge was in a triangular shape, superimposed on the subsequent box.
Thus:
My idea is to place a centered text on each of the items indicated by different colors above, in a kind of ruler for status.
What would be the most efficient way to do this with CSS?
9
One of the traditional ways is to use "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 pseudoelement, and the border.
In case I used <span> To simplify (hence the comments to kill line break), you have to choose the most suitable display for your case. About the spacing of the elements, have this post here:
Instead of putting HTML comments to take the space between the elements, you can create an element that involves these 4 elements and place the property font-size: 0. But within the elements you have to put a font-size for words to appear.
@Diegosouza I find the font size more Gambi than the comments, but grateful for the tip qq way. It’s just that the focus here was the beak, actually I think it wouldn’t even be the case to use span. I tried to use as few elements as possible to show that the technique is independent of an external container. I do not like font:0 pq although it hides the space, the element node stays in the DOM, and the comment does not.
Yes, true. That’s why I told you to try to put the font-size in the descending elements.
I even posted a reply with this alternative comments. kkkkkk that ironic.
@Diegosouza I remembered this post, Inkei by reference and tb to make fun of the HTML comment :D There was a lot of talk about these techniques at the time, so I knew I had post
I think it’s cool these CSS things, challenges. PT Stackoverflow could create an area of challenges. Where a user could create a competition to accomplish a certain situation in CSS. Make a playing card, for example. The coolest, the winner, would get 100 points. I’m traveling here... but it would engage the community and serve as learning for various CSS, HTML techniques
To be honest, I would use display: inline-flex or display: flex to organize the items inside.
When I get back from the bush I’ll give you a linear gradient answer :D
@Wallacemaxters so I put there "you have to choose the most suitable display for your case.": Q - I tried to make the example to be compatible with a lot of things, but with flex it will work in a good.
5
.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>+1, good too, rotating a square is pretty cool. It is worth saying that the ratio between the height of the two elements is 1.4142 (root of 2, is the diagonal of the square) so that they are equal, for who is to calculate for other measures.
I did with SCSS. In Codepen it gets more elegant.
+1, was ninja dus CSS
Browser other questions tagged css css3
You are not signed in. Login or sign up in order to post.
I’ll do it in Codepen the way I would.
– Diego Souza