5

enter image description here

Is it possible to achieve something like above image? So far I have tried following Code.

.greyParent {
  height: 19px;
  border-radius: 7px;
  background: rgb(196, 196, 196);
}
.greyParent > .activeSlide {
  background: rgb(0, 97, 188);
  border-radius: 7px;
  border-right: 1px solid #fff;
  float: left;
  width: 20%;
  height: 19px;
  position: absolute;
}
.greyParent > .activeSlide:first-child {
  left: 0%;
  z-index: 5;
}
.greyParent > .activeSlide + .activeSlide {
  left: 16%;
  z-index: 4;
}
<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="greyParent">
    <div class="activeSlide">

    </div>
    <div class="activeSlide">

    </div>
  </div>
</div>

I need to append .activeSlide div tag depending upon tab. Problem I am facing is as I append 5 .activeSlide div tags for fifth slide its not occupying entire parent div tag i.e div.greyParent. I understand that since i am doing position absolute and trying to move divs towards right, This is happening. But since i need to highlight the border of each partition i had to use position absolute. Can someone help me on this? Is there any solution for this?

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
SsNewbie
  • 257
  • 2
  • 8
  • 21
  • 3
    No, but you can have overlapping elements with border radius and white border – Justinas Jan 10 '17 at 14:40
  • 1
    Just make the right border like the left, but white with overlap.. – Michael Benjamin Jan 10 '17 at 14:42
  • Possible duplicate - http://stackoverflow.com/questions/11033615/inset-border-radius-with-css3 – Paulie_D Jan 10 '17 at 14:46
  • @Justinas: Yes I have overlapped first blue element just above Second blue element along with border radius and white border. But if i keep repeating the same for three more blue elements i.e totally five blue elements, It wont fit inside its grey parent element. – SsNewbie Jan 10 '17 at 14:57
  • @Michael_B: Yes Michael, I have used right border as mentioned in the code. I am still trying out the possibilities here. It wont fit inside parent element when i append five blue elements. – SsNewbie Jan 10 '17 at 15:00

4 Answers4

2

You can simply overlap the elements and give them the right width to make sure that they will be in the right place. You should also play with the left property to make them appear where you want.

The key should be in the properties you can see here:

.greyParent > div{
  width: 25%;
}
.greyParent > div:nth-child(1){
  left:0%;
  width: 20%;
}
.greyParent > div:nth-child(2){
  left:15%;
}

I have created this small jsfiddle which you can see as an example of what I mean

Icarus
  • 1,627
  • 7
  • 18
  • 32
  • Thanks for the effort. It works as expected for Desktop, but value of left needs to changed as we change width of screen. – SsNewbie Jan 10 '17 at 16:55
2

You can use :before and :after pseudo elements to create this shape.

  1. Draw circle of equal width and height on left/right corners of each list item respectively.
  2. Add box-shadow of 1px or 2px to create border-effect between cells.

Output Image:

Output Image

* {box-sizing: border-box;}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px;
}

ul li {
  position: relative;
  background: gray;
  height: 16px;
  width: 60px;
}

ul li:before,
ul li:after {
  box-shadow: 2px 0 0 #fff;
  border-radius: 100%;
  position: absolute;
  background: gray;
  height: 16px;
  content: '';
  width: 16px;
  left: -8px;
  top: 0;
}

ul li:first-child:before {
  box-shadow: none;
}

ul li:after {
  right: -8px;
  left: auto;
}

ul li.active,
ul li.active:before,
ul li.active:after {
  background: blue;
  z-index: 1;
}
<ul>
  <li class="active"></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
0

Try this, it's good ))

<div class="container">
  <div class="title">
    1/5
  </div>
  <div class="progress">
    <span class="active"></span><span class="active"></span><span></span><span></span><span></span>
  </div>
</div>


.container {
  display: flex;
}

.container .title {
  padding-right: 20px;
}

.container .progress {
  display: flex;
  width: 250px;
}

.container .progress span {
  display: block;
  height: 15px;
  width: 20%;
  background: gray;
  border: solid 1px #fff;
  border-radius: 7px;
  margin-right: -15px;
}

.container .progress span.active {
  background: blue;
}
.container .progress span:nth-child(1) {
  z-index: 40;
}

.container .progress span:nth-child(2) {
  z-index: 35;
}

.container .progress span:nth-child(3) {
  z-index: 25;
}

.container .progress span:nth-child(4) {
  z-index: 10;
}

JSfiddle example https://jsfiddle.net/5ph3uk94/

grinmax
  • 1,835
  • 1
  • 10
  • 13
-1

Why don't you just use 2 blue elements and 3 grey elements, instead of one big grey parent ?

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="parent">
    <div class="activeSlide"></div>
    <div class="activeSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
  </div>
</div>
Boris K
  • 1,469
  • 9
  • 29
  • This is really a comment, not an answer. – Paulie_D Jan 10 '17 at 14:46
  • @borris Nope. Still doesn't give a solution. As i said I need to implement cuved i.e border radius as shown in image. As you can see each blue slide is slightly super imposed on another. – SsNewbie Jan 10 '17 at 14:53
  • I know, but a border has to be outside an element, so you cannot achieve it without inner elements (grey or transparent, doesn't matter) – Boris K Jan 10 '17 at 15:16