How to create this angled bar shape with CSS

Question

I need to create this shape with html & css, (ignoring the grey border)

This is the html I have:

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

How can I do this, and have the two bars meet at an angle like this?

Please provide a [mcve]. – Daniel Springer Jan 27 '17 at 01:29 — Daniel Springer, Jan 27 '17 at 01:29

Michael Coker · Answer 1 · 2017-01-27T01:40:18.687

9

You can do it with a single element, pseudo elements, and 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>

edited Jan 27 '17 at 01:40

answered Jan 27 '17 at 01:30

Michael Coker

50,703
5
56
56

Paul John Diwa · Accepted Answer · 2017-01-27T01:50:33.440

Triangle like shape can be made by manipulating border, by making one or more side of a border to transparent you can achieved this.

Edit: I recommend @MichaelCoker answer , coz its easier to customize

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

How to create this angled bar shape with CSS

2 Answers2