Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 576
SsNewbie Avatar asked Oct 17 '22 19:10

SsNewbie


2 Answers

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>
like image 62
Mohammad Usman Avatar answered Oct 20 '22 11:10

Mohammad Usman


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

like image 33
Icarus Avatar answered Oct 20 '22 09:10

Icarus