双梯形形状

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>