CODEWITHSUNDEEP
htmlcssreactjssvg
WillKre
WillKre

Reputation: 6158

Align pentagon shapes which have text in them

I'm trying to make a bar which holds the navigation stack.

For example: Here I am on the client page

enter image description here

And then when I click on a clients name I go to a new page and it adds onto the bar:

enter image description here

Here is what I have so far: http://jsbin.com/bahaqebiga/edit?html,css,js,output

All that needs to be done is change of shape and I'd think some how to manage the z-index as the next arrow should always be under the previous one. I have tried with svg but couldn't get it right because of the text and there was a weird padding I couldn't get rid of, and also with pure html/css but also failed.

Note: position absolute can NOT be used

Any ideas?

Thanks

Upvotes: 0

Views: 397

Answers (1)

Dekel
Dekel

Reputation: 62616

You can have a pure css solution for that. No need for svg/js.

Use the :after pseudo-selector to create an arrow, and color it based on it's position:

.stack-arrow p:after {
  content: "";
  width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid blue;
  top: 0;
  margin-left: 14px;
  position: absolute;
}
.stack-arrow:nth-child(2) {
  background: red;
}
.stack-arrow:nth-child(2) p:after{
  border-left-color: red;
}
.stack-arrow:nth-child(3) {
  background: green;
}
.stack-arrow:nth-child(3) p:after{
  border-left-color: green;
}
.stack-arrow:nth-child(4) {
  background: blue;
}
.stack-arrow:nth-child(4) p:after{
  border-left-color: blue;
}

Check this example: http://jsbin.com/jusuwihize/1/edit?html,css,js,output

Here is a working example (after react):

.top-nav {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  height: 50px;
  width: 100%;
  z-index: 1000;
  background-color: #222;
}
.top-nav img {
  cursor: pointer;
}
.stack-arrow {
  cursor: pointer;
  height: 50px;
  color: white;
  background-color: blue;
  font-family: sans-serif;
  padding: 0px 15px;
  margin: 0.5px;
}
.stack-arrow {
  padding-left: 25px;
}
.stack-arrow p:after {
  content: "";
  width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid blue;
  top: 0;
  margin-left: 14px;
  position: absolute;
}
.stack-arrow:nth-child(2) {
  background: red;
}
.stack-arrow:nth-child(2) p:after{
  border-left-color: red;
}
.stack-arrow:nth-child(3) {
  background: green;
}
.stack-arrow:nth-child(3) p:after{
  border-left-color: green;
}
.stack-arrow:nth-child(4) {
  background: blue;
}
.stack-arrow:nth-child(4) p:after{
  border-left-color: blue;
}
<div class="top-nav" data-reactid=".0"><img height="50px" src="http://skihighstartups.com/wp-content/uploads/2015/07/logo-placeholder.jpg" data-reactid=".0.0"><div class="stack-arrow" data-reactid=".0.1"><p data-reactid=".0.1.0">Clients</p></div><div class="stack-arrow" data-reactid=".0.2"><p data-reactid=".0.2.0">Name</p></div><div class="stack-arrow" data-reactid=".0.3"><p data-reactid=".0.3.0">Extra</p></div></div>

Upvotes: 2

Related Questions