使邊界有一個角度

Question

我裝盤，使傾斜的邊界，我就明白我的意思還是儘量說做了一個快速的油漆十歲上下的設計。 雙色是DIV的，白色是白色的空間。

我希望紫色的DIV有這些角度的邊緣！我不知道如何做到這一點。

我搜索了一些角度的CSS邊框，但我只找到形狀，但我不明白它看完後是如何工作的：/

任何人都可以給我一個手或點我在正確的方向？感謝一堆！

Answer 1

我不會試圖將紫色div s粉碎成這些形狀。我會推薦一個像這樣的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