html - 使边框有一个 Angular

Question

我正在尝试制作一个 Angular 边框，我根据我的意思或试图表达的意思做了一个快速的绘画式设计:

绿色是logo，居中。紫色是 DIV，白色是空白。

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

我搜索了一些 Angular 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>

并用白色三 Angular 形制作 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