0

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

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?

Holly
  • 7,462
  • 23
  • 86
  • 140

2 Answers2

8

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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
5

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>