使边界有一个角度

Question

我正在努力制作一个有角度的边框，我根据我的意思做了一个快速的绘画设计或尝试说：

绿色是徽标，位于中间。 paurple是DIV，白色是白色空间。

我希望紫色的DIV有那些倾斜的边缘！我不知道该怎么做。

我搜索了一些有角度的css边框，但我只找到了形状，但我不明白它的工作原理如下：/

任何可以帮我指点或指出正确方向的人？谢谢你们！

Answer 1

我不会试图将紫色<span class="triangle-1"></span> <div> <span class="triangle-2"></span> <span class="logo"></span> <span class="triangle-3"></span> </div> <span class="triangle-4"></span> 粉碎成那些形状。我建议像这样的HTML设置：

body {
    background: #652f70;
    font-size: 0;
    margin: 0;
    text-align: center;
}
span {
    display: inline-block;
}
.triangle-1 {
    border-top: 40vh solid #fff;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}
.triangle-2 {
    border-left: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    left: 0;
}
.logo {
    background: #78bd52;
    height: 20vh;
    width: 34vw;
}
.triangle-3 {
    border-right: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    right: 0;
}
.triangle-4 {
    border-bottom: 40vh solid #fff;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

使用白色三角形制作CSS形状 - 这是CSS中更容易的任务。这是一个完美响应示例的CSS，可能是您想要的也可能不是：

with start_date as (
    select date_trunc('month', current_date) as start_date
)
select *
from
    t
    cross join
    start_date
where create_time >= start_date

这是一个JSFiddle