如何製作帶有邊框的梯形

我試圖構建具有文本內容和邊框（白色1px行）的梯形。如何製作帶有邊框的梯形

我發現的例子像這樣的東西：

height: 0; 
width: 120px; 
border-bottom: 120px solid #ec3504; 
border-left: 60px solid transparent; 
border-right: 60px solid transparent;

這是一個PNG例如，如果我用這個作爲背景色transpartent它會工作，但是怎樣的一個黑客，而不是作爲不錯.. 。

「夾路徑」似乎沒有足夠的支持，那麼，有沒有其他的方法？ SVG會成爲可能嗎？

由於提前

來源

2017-02-01 Rory

肯定的是，你能做到這一點的SVG。 –

相關（或可能重複）http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643 – Harry

您可以使用pseudo-element和使用perspective於母公司創建形狀作爲背景。

body { 
 
    background: lightblue; 
 
} 
 
div { 
 
    width: 150px; 
 
    height: 40px; 
 
    padding: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    -webkit-perspective: 130px; 
 
    perspective: 130px; 
 
    margin: 50px; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: lightgreen; 
 
    border: 1px solid white; 
 
    content: ''; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
    -webkit-transform: rotateX(20deg) rotateY(0deg); 
 
    transform: rotateX(20deg) rotateY(0deg); 
 
}

<div>Some text</div>

來源

2017-02-01 09:33:49

感謝這對我來說似乎是最好的解決方案 – Rory

如何製作帶有邊框的梯形

回答

相關問題