六角+ボーダー半径+背景画像、どうすればいいですか？

-3

私には質問があります。たとえば、私はthis pictureを得て、誰かの写真でそれに背景画像の幅のボックスシャドウ（黄色）をする必要があります（問題ではありません）。どうすればいい？六角+ボーダー半径+背景画像、どうすればいいですか？

*更新された画像！

2016-04-30 Serje Tankian

http://stackoverflow.com/questions/36828769/make-hexagon-shape-with-border-rounded-corners-and-transparent-background –

写真の背景と:: beforeと:: afterはどうですか？そして私はあなたの実現を見ました。 –

このようなタスクは、複雑なシェイプを定義することができるため、SVGで最も効果的です。

<svg viewBox="0 0 120 100" style="width:120px;height:100px"> 
 
    <defs> 
 
    <clipPath id="hexagon_clip"> 
 
     <path id="hexagon" d="M38,2 
 
      L82,2 
 
      A12,12 0 0,1 94,10 
 
      L112,44 
 
      A12,12 0 0,1 112,56 
 
      L94,90  
 
      A12,12 0 0,1 82,98 
 
      L38,98 
 
      A12,12 0 0,1 26,90 
 
      L8,56 
 
      A12,12 0 0,1 8,44 
 
      L26,10 
 
      A12,12 0 0,1 38,2" /> 
 
     <!-- SVG Hexagon path from http://stackoverflow.com/a/36842587/507674 --> 
 
    </clipPath> 
 
    </defs> 
 
    <image xlink:href="http://placehold.it/120x100" x="0" y="0" width="120px" height="100px" clip-path="url(#hexagon_clip)" /> 
 
    <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="5" fill="transparent" /> 
 
</svg>

何ここで起こることはクリッピングパスを画像に適用される、その後、六角のために定義されていることです。最後に、六角形をもう一度上に引いて境界線を作成します。

出典

2016-04-30 10:31:37

Thx。しかし、私はこれを参照してください：http://i.imgur.com/29ERbF6.png - 私はスタイルを持っている体の原因です - カラー：＃333何が問題なのですか？ –

Hm ... ''行を削除すると、画像が表示されますか？ –

はい、画像が表示されます。 –

六角+ボーダー半径+背景画像、どうすればいいですか？

答えて

関連する問題