CSS Cut out circle from a rectangular shape

by

You can do this using a single element (plus a pseudo element) using radial-gradient background for the parent element while the pseudo-element creates the circle.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

/* just for demo */

body,
html {
  font-size: 18px;
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Can I create a div with a Curved bottom?
  5. How to create a circle with links on border side
  6. How to make this arrow in CSS only?
  7. Shape with a slanted side (responsive)
  8. CSS3 Transform Skew One Side
  9. How to make a curved edge hexagon by using CSS
  10. How to draw circle in html page?
  11. Responsive CSS Trapezoid Shape
  12. Generate repeating hexagonal pattern with CSS3
  13. How to create a curve between two gradient using CSS?
  14. Hexagon shape with a border/outline
  15. How to create a transparent triangle with border using CSS?
  16. How to bevel the corner of a block div?
  17. Dynamically aligning pseudo element according to parent height
  18. CSS Speech Bubble with Box Shadow
  19. Center Triangle at Bottom of Div
  20. CSS box shadow around a custom shape?
  21. How can I make a 45 degree responsive ribbon with folded corner?
  22. Border with a transparent centred arrow
  23. Add outward curving border to elements like this: ◝◟___◞◜
  24. Skewed Borders on a Div
  25. Pixelated edge around a CSS Circle with overflow: hidden;
  26. Title with bottom border smaller than width
  27. div with triangle at the bottom with background image
  28. How to create a triangle in CSS3 using border-radius
  29. How to transform each side of a shape separately?
  30. How to create a ribbon shape in CSS

Leave a Comment