背景イメージのある丸い六角形の作成方法は？

Question

ネットを検索したところ、適切な解決策が見つかりませんでした。丸みを帯びた六角形を作成し、その六角形に背景画像を挿入して全体を塗りつぶす解決策があるかどうかを知る必要があります。 CSS3を完全に作成する方法がない場合は、背景イメージを使用して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; 
    } 

は、上記の六角形の内側に背景画像を配置する方法はありますか？ ありがとう！

Answer 1

私はあなたが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>

Answer 2

あなたは非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>