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中的梯形轮廓

回答

相关问题