Div /按钮带有一个圆形容器在它的左边 [英] Div/Button with a circle shaped container to the left of it

问题描述

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

Can I ask a little help about creating that shape with CSS?

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

The button needs a circle for the icon, and the simple box for the text.

推荐答案

以下是使用：之前伪元素的可能版本。使用 border-radius：50％将伪元素转换为圆形，然后放置在矩形 div＃menu

Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.

您可以使用 content 向伪元素添加图片$ c>属性，如下所示：

You can add a image (like the one in question) to the pseudo element by using the content property like shown below:

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的低版本，请使用他的回答，因为他们不支持：之前。

Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.

这篇关于Div /按钮带有一个圆形容器在它的左边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！