Question

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

有没有办法将背景图像放在上面提到的六边形内？谢谢！

Answer 1

万一你想要一个非svg选项，这里是一个复杂而不太好看的可能性

使用复合半径

可以稍微调整角的舍入

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何用背景图像创建圆角六边形？

2 个答案: