How do I draw an incomplete circle with CSS and in

问题:

How do I create a circle with a cut through it using CSS and an image in it? An example of what I want is shown below.Need a crossbrowser solution and with css not html.

回答1:

You can do this by creating the circle using a pseudo-element and then skewing the container with overflow: hidden.

The child pseudo-element is reverse skewed to make it appear as though it is not skewed at all.

.shape {
  position: relative;
  height: 100px;
  width: 120px;
  overflow: hidden;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.shape:after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100px;
  width: 100px;
  background: black;
  border-radius: 50%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}

<div class="shape"></div>

回答2:

I have another solution, this one also uses SVG, but is cross browser compatible as OP needed:

See this Fiddle

you dont need any CSS and just requires three lines of html

<svg >
 
 <circle cx="50" cy="50" r="50" clip-path="url(#cut-off-bottom)" />
  <polygon points="0,0 40,0 0,50" style="fill:white;" />
</svg>

Edit: Another thing I would like to add in, you can also show image inside the svg

<svg>

  <pattern id="img1" patternUnits="userSpaceOnUse" width="200" height="200">
    <image xlink:href="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" x="0" y="-50" width="200" height="200" />
  </pattern>
  <circle cx="50" cy="50" r="50" fill="url(#img1)" />


  <polygon points="0,0 40,0 0,50" style="fill:white;" />
</svg>

And again, you don't even need css for that, and also it is highly cross browser compatible.

回答3:

A little different approach using SVG

You can use svg to draw a clipped circle and then rotate it.

fiddle: http://jsfiddle.net/j66xt2so/

svg{-webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}

<svg >
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="70" r="50" clip-path="url(#cut-off-bottom)" />
</svg>

回答4:

The gradient background is a work around a strange behaviour of overflow:hidden
Sett the border-radius:100%; to all ways get a circular.

added an :after to add the content we need to cancel out the part we don't want.

.cut {
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: -moz-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: -ms-radial-gradient(center, ellipse cover, #000 0%, #000 1%, #000 95%, rgba(0, 0, 0, 0) 100%);
  background: radial-gradient(ellipse at center, #000 0, #000 48px, transparent 49px);
}
.cut:after {
  transform: rotate(-60deg) translate(-25px, -20px);
  display: block;
  content: "";
  height: 30px;
  width: 100px;
  background-color: white;
}

<div class="cut"></div>