Make a perfect circle around a div of variable height

by

Clip-path can easily do this if you consider solid coloration.

Resize the element and the circle will follow:

.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
  resize: both;
  background: blue;
  box-shadow: 0 0 0 200vmax red;
  clip-path: circle(71%);
  margin: 100px auto;
}
<div class="box"></div>

Related question to understand the magic number 71%: clip-path:circle() radius doesn’t seem to be calculated correctly

To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:

.box {
  width: 200px;=
  resize: both;
  clip-path: circle(calc(71% + 10px));
  margin: 100px auto;
  position: relative;
  font-size:35px;
  color:#fff;
}
/* the background layer */
.box::before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:blue;
}

/* the image layer */
.box::after {
  content:"";
  position: fixed; /* to make sure the image cover all the screen */
  z-index:-2;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>

More Related Contents:

  1. Bootstrap 4 Carousel “Half of previous”
  2. How can I select an element with multiple classes in jQuery?
  3. How to fallback to local stylesheet (not script) if CDN fails
  4. Increase cursor size in HTML body
  5. How to place a div over a image? [closed]
  6. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  7. What’s wrong with this div? [closed]
  8. Is there a way to style part of an input field’s value? [duplicate]
  9. How do I auto-hide placeholder text upon focus using css or jquery?
  10. How to change color of disabled html controls in IE8 using css
  11. Disable dragging an image from an HTML page
  12. Use a new CSS file to override current website’s
  13. Why is an element with position: fixed moving with a non-positioned sibling?
  14. Printing HTML table with many columns/rows using CSS layout?
  15. flex-grow not working in column layout
  16. Min-width and max-height for table attributes
  17. How can I change the font (family) for the labels in Chart.JS?
  18. How to make select elements shrink to max-width percent style within fieldset
  19. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  20. Border style do not work with sticky position element
  21. Items that span all columns/rows using CSS grid layout
  22. How to get CSS to select ID that begins with a string (not in Javascript)?
  23. How to make a DIV not wrap?
  24. Twitter Bootstrap: Center Pills
  25. When to use line breaks vs CSS positioning?
  26. word-wrap break-word does not work in this example
  27. How to place Text and an Image next to each other in HTML?
  28. How to make input autofocus in internet explorer?
  29. How to always show the vertical scrollbar in a browser?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment