css - 顶部和右侧 Angular 梯形

Question

它基本上是一个 flex 的 div:

那么可以只使用 CSS 而不使用图像吗？

Answer 1

嗯...我是这个形状最大的怀疑者，但它似乎是可能的 O_o

Demo

HTML

<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>

CSS

.shape
{
    background:red;
    float:left;
}

.one
{
    border-width:0px;
    border-bottom:10px solid red;
    border-left:200px solid #fff;
    width:0px;
}

.two
{
    width:200px;
    height:40px;
    clear:left;
}

.three
{
    border-width:0px;
    border-top:50px solid red;
    border-right:10px solid #fff;
    width:0px;
    margin-top:-10px;
}