make a div like circly cropped from top right corner

Question

how to make a cropped div from top right corner. like suppose i have a square image and i cut top right corner in circle shape. my question is how to make remaining shape of square image by using pure css??? please help me!!

my code:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

this code folding top right corner like fold a page. but i need circle cut on top right corner.

an image of the shape you need would make it much simpler to understand. just a question : do you need it on a plain background? — web-tiki, Sep 17 '14 at 09:40
you have to put border-top-right-radius: 50%; in both div and image — himanshu, Sep 17 '14 at 09:46

score 2 · Accepted Answer · answered Sep 17 '14 at 09:49

2

Very simlar to @web-tiki answer, but using a box-shadow to paint background , so body background can be seen through. DEMO

div {
  height: 150px;
  width:150px;
  overflow:hidden;
  position: relative;
}div:before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  height: 80px ;
  width: 80px;
  border-radius:100%;
  box-shadow:red 0 0 0 500px;

}

answered Sep 17 '14 at 09:49

G-Cyrillus

101,410
14
105
129

1

+1 as OP needs a transparent background, another alternative with border instead of box-shadows : http://codepen.io/web-tiki/pen/EGcyA – web-tiki Sep 17 '14 at 09:57
1

+1. [This](http://codepen.io/hari_shanx/pen/FweLz) is another version of it using `radial-gradient` but ofcourse no support in IE <= 9. – Harry Sep 17 '14 at 11:42
1

@Harry , yes, i like this version better and as you mention IE9 behavior, it is unfortunately still to be kept aside :) – G-Cyrillus Sep 17 '14 at 12:27

score 0 · Answer 2 · answered Sep 17 '14 at 09:43

Your question is very unclear, but here's two interpretations I can come up with based on it:

div {
 height: 300px;
 background: red;
 position: relative;
  border-top-right-radius: 80px;
}

<div></div>

Or option two:

div {
 height: 300px;
 background: red;
 position: relative;
}

div:before {
 content: '';
 position: absolute;
 top: 0; right: 0;
 width: 80px; height: 80px;
  background: white;
  border-bottom-left-radius:80px;
}

<div></div>

make a div like circly cropped from top right corner

2 Answers2