Is it possible to achieve border radius curved inside through CSS3? - html

Question

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?

Answer 1

You can use :before and :after pseudo elements to create this shape.
Draw circle of equal width and height on left/right corners of each list item respectively.
Add box-shadow of 1px or 2px to create border-effect between cells.
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>

Answer 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

Answer 3

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/

Answer 4

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>