Div / Button，左侧有一个圆形容器

Question

我可以问一下使用CSS创建该形状的一些帮助吗？

按钮需要一个圆形图标，以及文本的简单框。

Answer 1

这是使用:before伪元素的可能版本。使用border-radius: 50%将伪元素转换为圆形，然后根据需要定位在矩形div#menu之前。

您可以使用content属性将图像（如有问题的图像）添加到伪元素中，如下所示：

content: url(http://yoursite.com/yourimage.png);

或使用background-image属性：

background-image: url(http://yoursite.com/yourimage.png);

#menu {
  position: relative;
  width: 100px;
  height: 24px;
  line-height: 24px;
  color: white;
  background-color: peru;
  border: 1px solid peru;
  border-radius: 2px;
  padding-left: 24px;
}
#menu:before {
  position: absolute;
  content: '';
  height: 40px;
  width: 40px;
  top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
  /* top: -17px;  (height of parent - height of pseudo) - border-top of parent for bottom align */
  left: -24px; /* some value less than width - depends on amount of overlap needed */
  border: 1px solid transparent;
  background-image: url(http://lorempixel.com/40/40/people/1);
  background-color: peru;
  border-radius: 50%;
}

/* Just for demo */

* {
  font-family: Calibri;
  letter-spacing: 2px;
}
#menu {
  margin: 25px;
}

<div id='menu'>Menu Text</div>

注意：这实际上是Jason Gennaro发布的答案的另一个版本。如果您需要支持IE较低版本，请使用他的答案，因为它们不支持:before。

Answer 2

这是一个快速而又脏的版本：

<强> HTML

<div id="circle"></div>
<div id="rectangle">Header Text</div>

<强> CSS

#circle{
    border-radius: 50%;
    width: 85px;
    height: 85px; 
    background: brown;
    float:left;
}

#rectangle{
    width:300px;
    height:40px;
    background:brown;
    color:white;
    float:left;
    margin-top:20px;
    margin-left:-40px;
    position:relative;
    z-index:-1;
    padding-left:60px;
    padding-top:6px;
    font-family:arial;
    font-size:2em;
}

<强>样本

http://jsfiddle.net/H6Lkk/

<强>解释

1. 使用border-radius:50%和任意width来创建圈子。
2. float两个div允许重叠
3. 使用position和z-index将矩形放置在圆圈下
4. 根据需要在image
中添加徽标#circle