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。