使边框有一个角度

Question

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

绿色是logo，居中。紫色的是DIV的，白色的是白色的space.

我想要紫色 DIVs 有那些倾斜的边缘！我不知道该怎么做。

我搜索了一些有角度的 css 边框，但我只找到了形状，但阅读后我不明白它是如何工作的：/

任何人都可以帮助我或指出正确的方向吗？非常感谢！

Answer 1

我不会尝试将紫色 div 粉碎成那些形状。我会推荐这样的 HTML 设置：

<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>

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

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;
}

这里是 JSFiddle

使边框有一个角度

making border have a angle

html

css

angle