如何创建带有背景图像的圆角六边形？答案

【问题标题】：How to create a rounded hexagon with background image?如何创建带有背景图像的圆角六边形？
【发布时间】：2023-04-08 05:54:01
【问题描述】：

我在网上搜索过，找不到任何合适的解决方案。我需要知道是否有一种解决方案可以制作带圆角的六边形并将背景图像插入到该六边形中，以便将其完全填满。如果没有办法完全使用 CSS3，有没有办法通过使用背景图像来做到这一点？例如，我将这个圆角六边形作为背景图片：

    .staff_hexagon {
    position: relative;
    display: block;
    height: 200px;
    width: 100%;
    background: url('../img/staff_hexo.png') center center no-repeat;
    background-size: contain;
    overflow: hidden;
    }

有没有办法在上述六边形中放置背景图片？谢谢！

【问题讨论】：

在这个答案中使用 SVG - stackoverflow.com/questions/36828769/…，然后将图像作为 fill 应用到它。否决票不是我的。
@Harry 感谢您的回复。我只是不明白这个fill 是如何工作的。我使用了一个 *.svg 六边形并将这个六边形应用为背景图像。我从here 下载了一个.svg 格式的圆角六边形。但是，我只是不知道如何对其应用背景图像。当我更改fill 的十六进制值时，我可以更改它的颜色，但无法获得将背景图像应用到它的正确方法。是否有更动态的解决方案，以便最终用户（没有技术背景）可以轻松更改背景图像？
这个线程应该可以帮助你 - stackoverflow.com/questions/3796025/…。这是我知道的将图像填充添加到 SVG 形状的唯一方法。

标签： html css css-shapes

【解决方案1】：

以防万一您想要一个非 svg 选项，这是一个复杂且不太好看的可能性

圆角的圆角可以用复合半径进行一些调整

.container {
  width: 300px;
  height: calc(300px * 0.5714);
  margin: 80px;
  position: relative;
}
.frame {
  width: 100%;
  height: 100%;
  border-radius: 30px / 90px;
  position: absolute;
  overflow: hidden;
}
.r {
  transform: rotate(60deg);
}
.l {
  transform: rotate(-60deg);
}
.inner {
  width: 100%;
  height: 190%;
  top: -45%;
  position: relative;
  background-image: url(http://lorempixel.com/800/600);
  background-size: 190%;
  background-position: center center;
  background-repeat: no-repeat;
}
.r .inner {
  transform: rotate(-60deg);
}
.l .inner {
  transform: rotate(60deg);
}

<div class="container">
  <div class="frame h">
    <div class="inner"></div>
  </div>
  <div class="frame r">
    <div class="inner"></div>
  </div>
  <div class="frame l">
    <div class="inner"></div>
  </div>
</div>

【讨论】：

看起来比平常更圆润，但一个非常好的尝试和答案:)

【解决方案2】：

我认为您正在寻找 clip-path 属性。它可以使用生成的形状或外部svg。

div.test {
    background: url(http://lorempixel.com/output/cats-q-c-200-200-5.jpg) no-repeat 50% 50%;
    background-size: cover;
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
    width: 200px;
    height: 200px;
}

<div class="test">
  
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <polygon points=".41,.02 .59,.02 
                       .91,.16 1,.33 
                       1,.66 .91,.83 
                       .59,.98 .41,.98 
                       .09,.83 0,.66
                       0,.33 .09,.16
                       " 
               />      
      
      <circle cx=".5" cy=".2" r=".2" /> <!-- top -->
      <circle cx=".5" cy=".8" r=".2" /> <!-- bottom -->
      <circle cx=".8" cy=".33" r=".2" /> <!-- right top -->
      <circle cx=".8" cy=".66" r=".2" /> <!-- right bottom -->
      <circle cx=".2" cy=".33" r=".2" /> <!-- left top -->
      <circle cx=".2" cy=".66" r=".2" /> <!-- left bottom -->
    </clipPath>
  </defs>
</svg>

【讨论】：

他正在寻找一个圆角六边形。使用 CSS clip-path 会很难（如果不是不可能的话）。
它可以加载为内部或外部 svg。
我并不是说 SVG 不可能。我只是说纯 CSS 版本是不可能的。您当前的演示在这方面可能有点误导，但我会留给 OP 来决定。干杯:)
您是否看到他的问题以“万一万一……”开头？ :P
让我们同意不同意 ^_^