【问题标题】：How do I make the edges of the hexagon image round? [duplicate]如何使六边形图像的边缘变圆？ [复制]
【发布时间】：2022-02-01 06:34:52
【问题描述】：

我一个人在做一个小项目。我想让that hexagonal pfp的边缘变圆。

代码：

.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;
}

我尝试过使用border-radius，但我不知道它只会使那个六边形的边变成圆形。

I'm trying to get something like this.

我是怎么做到的？

【问题讨论】：

标签： html css

【解决方案1】：

弯曲路径

我建议您使用带圆角的 SVG 路径： https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

它应该是这样的（以心形为例）：

.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');
}

以下是有关路径的文档： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

您也可以使用 Illustrator 等矢量编辑软件创建路径，或者直接使用以下工具创建路径：https://yqnn.github.io/svg-path-editor/

SVG 滤镜

另一种解决方案是使用 SVG 过滤器。尽管它可能看起来“更简单”，但我强烈建议您使用弯曲路径（我之前提到的解决方案）以提高性能和可读性。

你可以声明一个过滤器来平滑角落：

<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>

然后，您只需要使用filter CSS 属性

.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)
}

来源：https://dev.to/afif/css-shapes-with-rounded-corners-56h

【讨论】：