I want something like this:
nested folder path
So, I copied and pasted some code from the Feeder chrome extension where I saw it and mixed it with my own to get the required thing:
.folder-path {
display: inline-block;
height: 50px;
width: 350px;
border: 0.1px solid black;
}
.folder-path .path-part {
display: inline-block;
height: 50px;
line-height: 50px;
margin-left: 10px;
position: relative;/*HACK HERE*/
top: -7px;
}
.folder-path .path-part + div {
display: inline-block;
height: 50px;
width: 35px;
display: inline-block;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 35px;
height: 35px;
border: 1px solid rgba(0,0,0,0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
position: relative;
left: -15px; /*to move slightly left*/
top: 6px; /*to accommodate rotation*/
}<div class="folder-path">
<!--div.path-part+div-->
<div class="path-part">Snippets</div>
<div></div>
<div class="path-part">d</div>
<div></div>
</div>However, on careful notice you will find that I had to use position: relative and top/left offset hacks in .folder-path .path-part rule. Without them, this is what it looks like:
.folder-path {
display: inline-block;
height: 50px;
width: 350px;
border: 0.1px solid black;
}
.folder-path .path-part {
display: inline-block;
height: 50px;
line-height: 50px;
position: relative;
margin-left: 10px;
}
.folder-path .path-part + div {
display: inline-block;
height: 50px;
width: 35px;
display: inline-block;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 35px;
height: 35px;
border: 1px solid rgba(0,0,0,0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
position: relative;
left: -15px; /*to move slightly left*/
top: 6px; /*to accommodate rotation*/
}<div class="folder-path">
<!--div.path-part+div-->
<div class="path-part">Snippets</div>
<div></div>
<div class="path-part">d</div>
<div></div>
</div>As you can see, the .path-part has gone down a bit, without my putting any top/down padding/margin/offset properties on either itself or its parent.
notice how the .path-part div has gone down a bit
I want to know why this is happening. Thank you!
UPDATE: So, I got to know that this is happening because the arrows are relatively positioned. Indeed it is correct. So, I want to know if there's any way to position the arrows the way they should be without affecting the other .path-part divs.