css - 在 2 div 之间画圈

Question

我如何在 CSS 中实现这一点。

目前我已经尝试了我所知道的一切但都失败了。我的基本结构是这样的。

<div>
  <div class='pink-div'></div>
  <div class='blue-cirle-div'>
    <div> Some Text </div>
  </div>
  <div class='yellow-div'></div>
</div>

谢谢。

Answer 1

给你。

HTML:

<div class="main">
  <div class='pink-div'>&nbsp;</div>
  <div class='blue-cirle-div'>
    <div class="forsomeText">Some Text</div>
  </div>
  <div class='yellow-div'>&nbsp;</div>
</div>

CSS:

.main{position:relative;}

.pink-div {
    background: none repeat scroll 0 0 #feaec9;
    height: 110px;
}

.yellow-div {
    background: none repeat scroll 0 0 #b5e51d;
    height: 110px;
}

.blue-cirle-div {
    background: none repeat scroll 0 0 #3f47cc;
    border-radius: 110px;
    display: block;
    height: 140px;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 18%;
    vertical-align: middle;
}


.forsomeText {
    display: block;
    margin: 0 auto;
    padding: 60px 37px 37px;
    text-align: center;
    vertical-align: middle;
}

现场 fiddle 链接:

WORKING DEMO

希望对您有所帮助。