背後

Question

這裏的圖像創建爲50％柱傾斜的邊緣是我想要達到的圖像...

Screenshot

我想這是有可能的歪曲：僞造或可能有很多帶邊界的工作，但它的內容在頂部，並且背後的圖像我很努力，任何想法都是值得歡迎的。或者，如果這只是一個可能的噩夢，

我知道有很多關於傾斜邊緣的問題，但沒有一個是與此相同的場景。

Answer 1

my solution

Figuring out how to get it responsive is up to you =) 

Answer 2

我會考慮的第一件事是這些元素如何堆疊在一起，以及它們如何在小型顯示器上顯示。從你的圖片看來，每個人都包含4個元素，如<h1> <p> <button>和<img>。不清楚的是，如果你想將<img>推下其他人或右邊的人。我建議在任何情況下將它們放入並按順序排列，這在沒有CSS的情況下是可以理解的，這使它們對於小型顯示器是一致的和可理解的，併爲每個顯示器分配適當的背景色。然後，一旦你有房地產將它們並排移動左側或右側（取決於你想要他們的地方）然後在適當的容器中爲你的分隔線應用一個簡單的背景圖像。最簡單的HTML代碼的例子，我能想出什麼你們對我的基礎是這樣的：

<main> 
 
    <section> 
 
    <figure> 
 
     <img src="drinks-image.jpg" alt="drinks image"> 
 
    </figure> 
 
    <div> 
 
     <h1>Drinks</h1> 
 
     <p>drinks text goes here</p> 
 
     <button>button</button> 
 
    </div> 
 
    </section> 
 
    <section> 
 
    <figure> 
 
     <img src="bookig-image.jpg" alt="booking image"> 
 
    </figure> 
 
    <div> 
 
     <h1>Book Your Seat</h1> 
 
     <p>booking text goes here</p> 
 
     <button>button</button> 
 
    </div> 
 
    </section> 
 
</main>

我希望這可以幫助你，或者至少讓你開始。我希望我能給你更多的信息，但我沒有太多要繼續。有幾種方法可以做到這一點，這將與許多版本的瀏覽器兼容。無論如何，你只想在需要時利用背景顏色並添加背景圖片。

Answer 3

下面的CSS會給你一個傾斜的邊緣;使用Chrome，Firefox和IE11進行測試。

.slanted-edge { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    border: 50px solid grey; 
 
    border-right-color: transparent; 
 
    border-bottom-color: transparent; 
 
}

要創建一個傾斜的邊緣，你把一個0大小的形狀，並加入邊框，是你想要的邊緣的高度的一半大小 - 在這個例子中，我想一個100px高的形狀，所以我用了50px。

然後，您必須可視化連接對角的兩條對角線，大致類似於[x]，它將圖像分爲四個三角形。您可以通過將該邊的邊框顏色屬性設置爲透明來將每個三角形設置爲透明。

爲了實現你要找的外觀，你可能需要四列，中間的兩個是傾斜的邊緣，而內容&圖像是外側兩列。當然，您可以使用內容和圖像上的::after和::before來創建傾斜邊緣，但我沒有對其進行測試。