Search code examples
htmlcsscropcss-shapes

make a div like circly cropped from top right corner

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.

Solution

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

}