Div/Button with a circle shaped container to the left of it

问题

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.

回答1:

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.

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);

or using the background-image property also:

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>

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.

回答2:

Here's a quick and dirty version:

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;
}

DEMO

http://jsfiddle.net/H6Lkk/

Explanation

use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle

来源：https://stackoverflow.com/questions/19449840/div-button-with-a-circle-shaped-container-to-the-left-of-it

标签

css

css3

css-shapes