雙梯形形狀

Question

我猛擊我的頭越來越狀這雙梯形上的網頁。下面看到的CSS類創建了一個可以重複和破壞的梯形，但是我確保如何將它擴展到瀏覽器的全部寬度並使其響應。

.warpedbanner { 
    border-right: 150px solid red; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    height: 4em; 
    width: 4px; 
} 

Answer 1

您可以檢查LINK的形狀。

div { 
 
    width: 400px; 
 
    height: 150px; 
 
    clip-path: polygon(50% 0%, 100% 15%, 100% 84%, 50% 100%, 0 85%, 0 18%); 
 
    background-color: red; 
 
}

<div></div>

上面的代碼將在Chrome工作，但不能在Firefox。該片段在兩個瀏覽器的工作如下

div { 
 
    width: 400px; 
 
    height: 150px; 
 
    background-color: red; 
 
    -webkit-clip-path: url("#clipping"); 
 
    clip-path: url("#clipping"); 
 
}

<div></div> 
 
<svg width='0' height='0'> 
 
    <defs> 
 
    <clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0 0.25, 0.5 0, 1 0.25, 1 0.75, 0.5 1,0 0.75" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg>