css中的梯形輪廓

如何在css中繪製下面的圖像。css中的梯形輪廓

有許多鏈接繪製填充形狀，但力量找到任何可以繪製輪廓的鏈接。

2016-02-12 user3564488

僅與邊框的顏色充滿了一樣？ – PeeHaa

相關 - http://stackoverflow.com/questions/19248443/is-it-possible-to-create-an-angled-corner-in-css/30729446#30729446（用於'.shape：before'的相同方法沒有'border-radius'就可以工作）。 – Harry

上述評論（或）在第一個重複線程中使用的答案（在頂部的通知中）將使用上述方法。你只需要在需要的邊上設置邊框。 – Harry

使用僞元素應該得到你想要的效果。

這不是最好的，但它是一個很好的起點，讓你在路上。

div { 
 
    margin-left: 20px; 
 
    border-top: 2px solid darkred; 
 
    border-right: 2px solid darkred; 
 
    height: 30px; 
 
    display: inline-block; 
 
    background: white; 
 
    width: auto; 
 
    padding: 0 10px 0 0; 
 
    line-height: 30px; 
 
    position: relative; 
 
} 
 
div:before { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: -11px; 
 
    content: ''; 
 
    width: 35px; 
 
    height: 35px; 
 
    transform: rotate(30deg); 
 
    background: transparent; 
 
    border-left: 2px solid darkred; 
 
}

<div>Some text</div>

另一種方法是使用SVG其是超級簡單並且使用座標，使所期望的形狀。

<svg width="100px" height="30px" viewbox="0 0 100 30" preserveAspectRatio="none"> 
 
    <path d="M5,25 L20,5 L95,5 L95,25" stroke="darkred" stroke-width="5" fill="white" /> 
 
</svg>

來源

2016-02-12 13:29:23 Stewartside

css中的梯形輪廓

回答

相關問題