製作一個帶有圖像的真正彎曲的容器

讓我首先說我不是一個真正的開發人員，我是一名設計師，但有時我開發工作的開發人員真的很忙或者只是懶得真的讓設計變得生動起來。因此，我把自己置於尋找資源的位置等等。我在尋求製作帶有圖像的彎曲容器的幫助......一個可編輯的容器，意思是說，可以像曲線的直接變化一樣，如果它的裏面，出來，像圖片瀏覽：製作一個帶有圖像的真正彎曲的容器

https://i.stack.imgur.com/fFUMi.png

https://i.stack.imgur.com/MwGYh.png

現在，我將曲線的PNG與曲線一起傳遞給他，但正如每個人都應該知道的那樣，這對響應性，質量等都是不利的。我還告訴過他關於SVG的事，但他告訴我，如果這是真的或者只是懶惰，我不可能再次知道。我感謝任何幫助。

來源

2017-05-03 Paula

嗨 - 你可以編輯你的問題，包括你試過的代碼嗎？我不確定爲什麼PNG不好？您可能需要使用不同的圖像等使用媒體查詢來處理不同大小的屏幕。 – WiredPrairie

可以嘗試只使用保持所述圖像的容器上僞元素（因爲圖像可以沒有僞元件）

像這樣的第一個例子：（可以修改高度，寬度，邊界半徑和位置來滿足您的需求）

.curved-image { 
 
\t position: relative; 
 
\t width: 350px; 
 
\t margin-bottom: 20px; 
 
\t overflow: hidden; 
 
} 
 

 
.curved-image:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t width: 160%; 
 
\t height: 100%; 
 
\t border-radius: 50%; 
 
\t position: absolute; 
 
\t top: 60%; 
 
\t left: -10%; 
 
\t background-color: green; 
 
} 
 

 
.curved-image img { 
 
\t display: block; 
 
}

<div class="curved-image"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

第二個例子是有點棘手做逆用這種方法，如果有人想加入到這個答案

來源

2017-05-03 14:51:26 StefanBob

製作一個帶有圖像的真正彎曲的容器

回答

相關問題