如何在CSS中制作圈子？

Question

我需要在灰色条纹上做白色的东西。我感到困惑，因为我之前没有做过类似的事。你会采用哪种方法来创造这样的东西？

JSFiddle

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

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

提前谢谢！

Answer 1

我希望你会发现这个答案既简单又像素完美。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能想要使用border-radius属性。

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

你可以这样做，请参阅小提琴：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

我是这样做的

.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

单个标签+伪也是：

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>

更多示例和不同形状或用途 - 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