CSS - How to make side of rectangle to be triangle shape?

Question

I'm trying to make something like the image:

My code:

.wrapper {
  display:flex;
  width: 500px;
  height:100px;
}

.rectangle1 {
  background:red;
  width:33.333%;
}

.rectangle2 {
  background:blue;
  width:33.333%;
}

.rectangle3 {
  background:green;
  width:33.333%;
}

<div class="wrapper">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>

I can't find any solution to make the side of the rectangle to be a pointing shape (triangle) , any help? thanks!

Answer 1

You can do that in many ways, I am using Clip path to help you out.

.wrapper {
  display:flex;
  width: 500px;
  height:100px;
}

.rectangle1 {
  background:red;
  width:33.333%;
}

.rectangle2 {
  background:blue;
  width:33.333%;
}

.rectangle3 {
  background:green;
  width:33.333%;
}

.wrapper > div {
  position : relative;
}

.wrapper > div:after {content: '';
    position: absolute;
    display: block;
    left: 99.8%;
    top: 0;
    bottom: 0;
    width: 25px;
    z-index: 99;
    height: 100%;
    background: #007bff;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    }

.wrapper > div.rectangle1:after {
  background-color: red;
}
.wrapper > div.rectangle2:after {
  background-color: blue;
}

.wrapper > div:last-child:after {
display: none;
}

<div class="wrapper">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>