Как создать эту угловую форму бруска с помощью CSS

Question

Мне нужно, чтобы создать эту форму с HTML & CSS, (не обращая внимание на серую рамку)

Это HTML у меня есть:

<span class="bar-wrapper"> 
    <span class="bar first">&nbsp;</span><span class="bar last">&nbsp;</span> 
</span> 

Как могу ли я сделать это, и чтобы два бара встречались под углом, подобным этому?

Answer 1

треугольник как форма может быть сделано путем манипулирования границы, сделав одну или более сторону границы к прозрачному вы можете это достичь.

Edit: Я рекомендую @MichaelCoker ответ, сог его легче настроить

.bar{ 
 
    width: 200px; 
 
    display: inline-block; 
 
    border: 10px solid #000; 
 
} 
 
.bar.first{ 
 
    border-color: blue; 
 
    border-right-color: transparent; 
 
    border-top-width: 0; 
 
} 
 
.bar.last{ 
 
    border-bottom-width: 0; 
 
    border-color: red; 
 
    margin-left: -10px; 
 
    border-left-color: transparent; 
 
}

<div class="bar-wrapper"> 
 
    <div class="bar first"></div><div class="bar last"></div> 
 
</div>

Answer 2

Вы можете сделать это с одним элементом, псевдо элементов и transform: skew();

div { 
 
    height: 1em; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
div:before, div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    transform: skew(30deg); 
 
} 
 
div:before { 
 
    width: 80%; 
 
    left: -10%; 
 
    background: #9fd256; 
 
} 
 
div:after { 
 
    width: 40%; 
 
    right: -10%; 
 
    background: #5d7cb8; 
 
}

<div></div>