How to make circle thing in CSS?

Question

I need to make that white thing over grey stripe. I got confused as I haven't made anything like that before. Which approach would you apply for creation of such thing?

JSFiddle

<div class="stripe"></div>

.stripe {
  background-color: #B7B7B7;
  height: 13vh;
}

Thank you in advance!

Answer 1

I hope you'll find this answer to be both simple and pixel-perfect.

.stripe {
    background-color: #B7B7B7;
    height: 13vh;
}
.whiteThing {
    background-color: white;
    height: 13vh;
    width: 13vh;
    border-radius:0 50% 50% 0;
}

<div class="stripe">
    <div class="whiteThing"></div>
</div>

Answer 2

You might want to use border-radius property.

HTML:

<div class="stripe">
<div class="circle">
</div>
</div>

CSS:

    .stripe {
  background-color: #B7B7B7;
  height: 13vh;
}

.circle{
  background:white;
  width:10%;
  height:100%;
  border-radius:00px 50px 50px 0px;
}

https://jsfiddle.net/4uk5eyuq/

Answer 3

W3Schools on border-radius property

.stripe {
    background-color: #B7B7B7;
    height: 13vh;
}
.thatwhitethingovergreystripe {
    background-color: white;
    height: 13vh; /* or 100% */
    width: 80px; /* or 6.5vh for semicircle or 13vh for rectangle with r width and semicircle */
    border-top-right-radius: 6.5vh; /* this does the trick; make it any number you like or just make it full height of your div */
    border-bottom-right-radius: 6.5vh; /* and this */
}

<div class="stripe">
    <div class="thatwhitethingovergreystripe"></div>
</div>

Answer 4

<div class="stripe"><span class="circle"></span></div>

.circle {
  border-radius:50%; //makes the square into circle regardless of size
  background: white;
  height:13vh;
  width:13vh;
  display:block;
  overflow:hidden;
 }

Answer 5

You can do it like this, see fiddle: https://jsfiddle.net/5wwg1q5j/3/

html

<div class="stripe">
<div class="rec">
</div>
<div class="circle">
</div>
</div>

css

body{margin: 0;}
.stripe {
  background-color: #B7B7B7;
  height: 100px;
}
.rec{
  width: 100px;
  height: 100px;
  background-color: white;
}
.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
  background-color: white;
  position: absolute;
  left: 50px;
  top: 0;
    /* width and height can be anything, as long as they're equal */
}

Answer 6

I did by this way

.s2{
  background-color:white;
  float:left;
  width: 70px;
  height: 13vh;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.stripe {
  background-color: #B7B7B7;
  height: 13vh;
}

<div class="s2"></div><div class="stripe"></div>

Answer 7

a single tag + pseudo does too:

h1 {
  overflow:hidden;/* to hold shadow of pseudo */
  padding-left:1.5em; /* leave room for the shape */
  line-height:2em;
  }
h1:before { /* the shape */
  content:'';
  float:left;/* or inline-block or absolute position, works too in flex context*/
  height:2em;/* here height of tag if one line */
  width:2em;/* from a square you can draw a circle */
  margin-left:-2.5em;/* hide half of it or  any amount */
  border-radius:50%;/* draw that circle */
  box-shadow:0 0 500px 500px gray, 0 0  1000px 1000px yellow;;/* paint a hudge shadow to use as background for parent tag */
  }
  /* add borders ? */
h1 + h1 {
  border:solid;
  border-left:none;
  border-radius: 0 1em 1em  0;
  }
h1 + h1:before {
 box-shadow:0 0 0 3px,0 0 500px 500px gray, 0 0  1000px 1000px yellow;;/* paint a hudge shadow to use as background for parent tag */
  }

body {
  background:url(http://lorempixel.com/600/400/nature/2);
  }

<h1> reverse rounded </h1>
<h1> reverse rounded borders </h1>

---

some more examples and different shapes or use -http://codepen.io/gcyrillus/pen/yJfjl -http://codepen.io/gcyrillus/pen/Kpvuf -http://codepen.io/gcyrillus/pen/HEFtk -http://dabblet.com/gist/5690173 -http://dabblet.com/gist/5309926