Clip path inset circle?

by

I don’t think you can achieve this with clip-path but you can certainly cut a hole in a div using the radial-gradient background images. This has much better browser support than clip-path too.

Note: This approach (and box-shadow ) will work only when the element that is covering the content below has a colored fill. If instead of sandybrown color, there needs to be another image on top then these approaches will not work because they don’t actually cut a hole, they just mimic that effect.

.div-with-hole {
  height: 100vh;
  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: all 2s ease;
}
.div-with-hole:hover {
  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */
}
body {
  background: url(http://lorempixel.com/800/800/nature/1);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
<div class="div-with-hole"></div>

More Related Contents:

  1. Speech bubble with arrow
  2. Transparent hollow or cut out circle
  3. How to resize the ClipPath area of SVG?
  4. Control the dashed border stroke length and distance between strokes
  5. How to make 3-corner-rounded triangle in CSS
  6. CSS transparent curved shape with two rounded sides
  7. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  8. Is it possible to create an angled corner in CSS?
  9. Wave (or shape?) with border on CSS3
  10. How to draw a circle sector in CSS?
  11. How to create a curve on the top of a background?
  12. Outlining and partially filling an SVG Shape
  13. Hexagon shape with CSS3
  14. Align text on slanted line
  15. background image, linear gradient jagged edged result needs to be smooth edged
  16. How to make a circle around content using CSS?
  17. Adjacent divs with angled borders? [duplicate]
  18. Blocky gradient effect in CSS3
  19. Border within border CSS
  20. Half hexagon shape with one element
  21. How to create a radial menu in CSS?
  22. Arrow Box with CSS
  23. Filling water animation
  24. Make CSS3 triangle with linear gradient
  25. Creating an Isoceles Trapezoid shape
  26. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  27. Make table cells square
  28. Creating a droplet like border effect in css
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment