我要什麼如何創建CSS圖像與傾斜的邊框

What I am trying to achieve

我有一個圖像，需要出現在多邊形內部。粉紅色的區域就是圖像。

什麼我試圖

使用被上部，且圖像的底部鋪設SVG三角形形狀（100％寬）。底部頂部和底部左上方的左上角Traingle。

它工作的很好，但似乎在許多瀏覽器上出現問題，你會在SVG周圍看到一條隨機線。（見圖像的下方，可以通過本身是一個單獨的問題）

enter image description here

我也使用傾斜試圖/旋轉頂部和底部元件。但是，由於元素是響應式的，因此在某些分辨率下，偏斜的元素會產生差距。（見下圖）

enter image description here

什麼我可以嘗試

使用的圖像。那裏有很多問題。這將是我的最後一招。圖像不是獨立於分辨率的，我必須使用巨大的圖像才能在高分辨率屏幕上看起來不錯，而這些圖像必須在瀏覽器中縮小，並不是很好。

當我需要幫助

尋找任何其他方式，我可以達到這樣的效果，最好是基於CSS的解決方案。

來源

2015-06-21 Prashant

我已經看到SVG'夾path'是在大多數情況下，最好的，但如果你想有一個CSS方式，然後看看[此線索]（HTTP：//計算器.COM /問題/ 5293736/CSS3變換偏移）。你基本上必須旋轉容器的角度。但是，再次反轉圖像會很麻煩。你甚至可以嘗試CSS'clip-path'，但瀏覽器的支持非常差。 – Harry

會像[這個小提琴]（http://jsfiddle.net/boafz90s/2/）的工作？沒有轉換，沒有SVG，只是邊界。 CSS雖然取決於圖像的尺寸，也就是說，您將需要爲每個使用的圖像分別使用CSS。 –

@MrLister圖像需要有響應，所以我不能使用已知的邊框寬度。我可以使用JS更新調整大小的邊框寬度，但頁面上有幾個這樣的元素可能會導致調整大小。 – Prashant

SVG

我用polygon形狀我創建了傾斜的圖像。
使用patterns我創建了一個可以填充形狀的背景圖像。

將填充設置爲帶有模式ID的URL創建了形狀。

.slanted { 
 
    width: 100vw; 
 
    height: auto; 
 
} 
 
.shape { 
 
    fill: url(#img1); 
 
}

<svg class="slanted" viewbox="-1 -1 102 102" preserveAspectRatio="none"> 
 
    <defs> 
 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
 
     <image xlink:href="http://1.bp.blogspot.com/-uNrNW5JkyBU/UzA0xPGSvDI/AAAAAAAAEY0/I8TWWZK7hrw/s1600/LoremIpsum.png" x="0" y="0" width="150" height="100" /> 
 
    </pattern> 
 
    </defs> 
 
    <polygon class="shape" points="0,20 100,0 100,100, 0,80" /> 
 
</svg>

CSS

使用3D轉換，你可以很容易地得到這個形狀。
圖像也將被旋轉。
透視設置了3D效果的深度。
設置transform：rotate（）會設置旋轉多少。

.container { 
 
    margin-top: 50px; 
 
    perspective: 600px; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.shape { 
 
    
 
    transform: rotateY(-45deg); 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(https://s3-ap-southeast-1.amazonaws.com/expin/community/550e15686481272aad000023/M9a0doEXcgojevVuk38n.jpg); 
 
}

<div class="container"> 
 
    <div class="shape"></div> 
 
</div>

來源

2015-06-21 22:57:14 Persijn

我剛剛在評論中說，它需要做出反應，使得這個**很多難以給出正確的答案。 – Persijn

不幸的是，您的SVG解決方案也具有與我一樣的渲染問題。這似乎是反鋸齒問題。將SVG的共享渲染屬性設置爲crispEdges可刪除多餘的行。但是，關閉抗鋸齒導致鋸齒狀對角線。而且，CSS解決方案沒有響應。事實上，這使事情變得更加困難。 – Prashant

@Persijn idk爲什麼你說「*使其響應更難*」。只需添加100％的寬度和高度，以使其對視口的寬度做出響應！：https：//jsfiddle.net/6bkygxbp/ –

如何創建CSS圖像與傾斜的邊框

回答

SVG

CSS

相關問題