Belle Icon Shape in CSS

Belle icon shape in CSS

Well, in order to achieve the exact effect, we cannot rely on a single element even if we use percentage on border-radius.

So one option could be using two (pseudo-)elements overlapping each other where one of them is rotated by 90deg:

div {  width: 300px;  height: 300px;    /* Just for demo */  width: 95vmin; height: 95vmin;    position: relative;}
div:after, div:before {  content: "";  background: teal;  position: absolute;  top: 0;  left: 8%;  right: 8%;  bottom: 0;  border-radius: 50% / 22%;}
div:before {  transform: rotate(-90deg); /* vendor prefixes omitted due to brevity */}

<div></div>

In css, how to create a bulging square

Here is a quick example where we change the top and bottom border-radiuses. We can use the other value as a weird kind of height thing which will control the height of our radius.

.box {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1em;
}

<div class="box">8</div>

true circle (or any non-rectangle shape) element in html5?

Border-radius just makes the element look round (except in firefox, reportedly).

Maps kind of work, but I want to avoid forcing an image.

SVG works, but it's still not pure html/css because javascript is needed for links to work. The SVG element is still square too, though the shapes inside are elements that respond well to javascript events. So it's not 100% perfect, but it is workable.

Would definitely be cooler if we had the ability to control the shape of elements on the page beyond drawing inside of a canvas. Maybe I'll play around with building an entire site inside a canvas...

Thanks for the suggestions!

Complex border-radius Issue (different edge curve to corner curve) in CSS

I believe the shape you're using may be called a "squircle." Regardless, if you can create it as a vector, then you can create an avatar mask using an SVG.

For example, you could make a squircle shape in a vector editing program and use it as a clip path.

HTML/SVG

<img class="clip-svg" src="https://picsum.photos/450" alt="Lorem Picsum">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450"><title>squircle</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
  <clipPath id="squircle">
  <path d="M225,449.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S20,364.29,11.93,330.92C4.45,299.86.5,263.23.5,225s4-74.86,11.43-105.92C20,85.71,31.8,60.49,46.14,46.14S85.71,20,119.08,11.93C150.14,4.45,186.77.5,225,.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21S430,85.71,438.07,119.08c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S364.29,430,330.92,438.07C299.86,445.55,263.23,449.5,225,449.5Z"/><path d="M225,1c38.19,0,74.78,4,105.8,11.42,33.29,8,58.42,19.8,72.7,34.08s26.07,39.41,34.08,72.7c7.47,31,11.42,67.61,11.42,105.8s-3.95,74.78-11.42,105.8c-8,33.29-19.8,58.42-34.08,72.7s-39.41,26.07-72.7,34.08C299.78,445.05,263.19,449,225,449s-74.78-3.95-105.8-11.42c-33.29-8-58.42-19.8-72.7-34.08s-26.07-39.41-34.08-72.7C5,299.78,1,263.19,1,225s4-74.78,11.42-105.8c8-33.29,19.8-58.42,34.08-72.7s39.41-26.07,72.7-34.08C150.22,5,186.81,1,225,1m0-1C150.66,0,76.31,15.26,45.79,45.79c-61,61.05-61,297.37,0,358.42C76.31,434.74,150.66,450,225,450s148.69-15.26,179.21-45.79c61.05-61,61.05-297.37,0-358.42C373.69,15.26,299.34,0,225,0Z"/>
  </clipPath></g></g></svg>

CSS

.clip-svg {
  clip-path: url(#squircle);
}

And here it is as a codepen

EDIT

To add a gradient border, you can use a second path in the squircle. A simple border on the image doesn't work, as it goes around the edges of the rectangular image and gets cut off. Here is a version with a background squircle with a gradient border and a masked image inside it.

HTML/SVG

<svg width="516" height="516" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 516 516">
  <defs>
    <style>
      .background-squircle{fill:url(#linear-gradient);}
      .inner-image{clip-path:url(#clip-path);}
    </style>
    <clipPath id="clip-path">
      <path d="M258,482.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S53,397.29,44.93,363.92C37.45,332.86,33.5,296.23,33.5,258s4-74.86,11.43-105.92c8-33.37,19.87-58.59,34.21-72.94S118.71,53,152.08,44.93C183.14,37.45,219.77,33.5,258,33.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21s26.17,39.57,34.21,72.94c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S397.29,463,363.92,471.07C332.86,478.55,296.23,482.5,258,482.5Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" y1="262" x2="524" y2="262" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/><stop offset="1"/>
    </linearGradient>
  </defs>
  <title>SquircleWithImage</title>
  <g id="Avatar_1" data-name="avatar">
    <path class="background-squircle" d="M258,515.5c-43.84,0-85.85-4.53-121.47-13.11-38.28-9.22-67.21-22.79-83.67-39.25s-30-45.39-39.25-83.67C5,343.85.5,301.84.5,258S5,172.15,13.61,136.53C22.83,98.25,36.4,69.32,52.86,52.86s45.39-30,83.67-39.25C172.15,5,214.16.5,258,.5S343.85,5,379.47,13.61c38.28,9.22,67.21,22.79,83.67,39.25s30,45.39,39.25,83.67C511,172.15,515.5,214.16,515.5,258S511,343.85,502.39,379.47c-9.22,38.28-22.79,67.21-39.25,83.67s-45.39,30-83.67,39.25C343.85,511,301.84,515.5,258,515.5Z"/>
    <g class="inner-image">
      <image id="Image" data-name="Layer 0" width="516" height="516" xlink:href="https://picsum.photos/516"/>
    </g>
  </g>
</svg>

---

Related Topics