六邊形+邊框半徑+背景圖像，我該怎麼做？

-3

我有一個問題你。例如，我得到了this picture，並且需要在其上使用某人的照片（無所謂）對背景圖像寬度進行箱形陰影（黃色）。我該如何做對嗎？六邊形+邊框半徑+背景圖像，我該怎麼做？

*更新的圖片！

2016-04-30 Serje Tankian

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

如何使用::之前和之後的照片背景？我看到你的認識。 –

這樣的任務最好用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它有什麼問題嗎？ –

嗯......如果您刪除了''這一行，圖片是否出現？ –

是的，圖片出現。 –

六邊形+邊框半徑+背景圖像，我該怎麼做？

回答

相關問題