'How do I make the edges of the hexagon image round? [duplicate]

I'm working on a small project by myself. I want to make the edges of that hexagonal pfp round.

The code:

.hex img {
   width: 50px;
   height: 50px;
   -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(0% 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0%, 25% 0%);
  object-fit: cover;
}

I've tried using border-radius, but little did I know that it would only make the sides of that hexagon round.

I'm trying to get something like this.

How do I make it like that?

htmlcss


Solution 1:[1]

Curved Path

I suggest that you use an SVG path with rounded corner: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

It should look like this (this is a heart shape as an example):

.hex img {
    clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
}

Here's the documentation concerning paths: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

You can also create the path with a vector editing software like Illustrator, or directly only with tools like this: https://yqnn.github.io/svg-path-editor/

SVG filter

Another solution would be to use SVG filters. Although it may look "simpler" I strongly suggest that you use curved paths (the solution I mentioned earlier) for performance and readability.

You can declare a filter that will smooth corners like that:

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Then, you just need to use the filter CSS property

.hex::before {
    content:"";
    display:block;
    padding-top:86.6%;
    background:red;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex {
    width: 100px;
    height: 100px;
    filter: url(#round)
}

source: https://dev.to/afif/css-shapes-with-rounded-corners-56h

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions