How do I draw an incomplete circle with CSS and in it how to put a picture?

Question

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.

enter image description here

[There is an example here](http://codepen.io/xram/pen/thLsk) **first result on google** — atmd, Feb 23 '15 at 12:15
@ThePragmatick The OP does not need to show us what they've tried in order for this to be a useful question. In this case, code wouldn't help us anyway. If you're interested in why this is the case, [Shog9 points it out in his answer here](http://meta.stackoverflow.com/a/286760/165870) — George Stocker, Feb 26 '15 at 14:52

score 17 · Answer 1 · answered Feb 23 '15 at 12:17

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>

Naeem Shaikh · Answer 2 · 2015-03-05T12:14:21.603

13

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.

edited Mar 05 '15 at 12:14

answered Feb 23 '15 at 13:30

Naeem Shaikh

15,331
6
50
88

2

@Persijn: these are called [XY problems](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem), when user asks something and ends up with a different solution. anyways, this solution fulfill its needs only using HTML, isnt that great.. or take it this way.. you will still need to write html to draw a css circle.. how about removing all html and just using css.. do you have any solution like that(only css and no html) – Naeem Shaikh Feb 23 '15 at 14:52
@NoDownvotesPlz I am trying to integrate your code with my design, I have an image bigger and when I put your code on it it didnt have a look that is on your fiddle. I understand that I need to change x, y, z coordinates but didnt how exactly, can you help me with? – Anahit Ghazaryan Mar 15 '15 at 18:46
@AnahitGhazaryan.. also accept the answer when it is useful to you, dont keep accepting and then de-accepting the answers.. if you have more questions, ask them differently – Naeem Shaikh Mar 16 '15 at 08:16
@NoDownvotesPlz here is the [Fiddle](https://jsfiddle.net/pdw8txs0/) .I need to have an image bigger – Anahit Ghazaryan Mar 19 '15 at 09:08

Naeem Shaikh · Answer 3 · 2015-03-10T19:17:30.727

7

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>

edited Mar 10 '15 at 19:17

answered Feb 23 '15 at 12:26

Naeem Shaikh

15,331
6
50
88

1

@AnahitGhazaryan: Please don't mistake this as asking to accept my answer because I am not. Acceptance is your own choice, but the cross browser nature is same for both answers because both use transforms. – Harry Feb 23 '15 at 12:38
1

@AnahitGhazaryan.. Harry is right: both of these solutions are identical in tearms of cross browser compatibility – Naeem Shaikh Feb 23 '15 at 12:41
1

@web-tiki it the second solution I loved more but it didnt work for me as in the div I had img it is not empty generally, can you help me with this? – Anahit Ghazaryan Feb 23 '15 at 12:41

Persijn · Answer 4 · 2015-02-23T14:47:03.463

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>

@Persijn the "strange border" behaviour is discussed [here](http://stackoverflow.com/questions/19882283/pixelated-edge-around-a-css-circle-with-overflow-hidden) — web-tiki, Feb 23 '15 at 14:31

How do I draw an incomplete circle with CSS and in it how to put a picture?

4 Answers4

Linked