css - 左侧有一个圆形容器的 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. 使用positionandz-index将矩形放在圆的下方
4. 根据image需要在#circle