trapezoid

by sesubash

HTML

<div class="wrapper">

  <div class="box">
  hello
  </div>
  <div class="box">
  hi
  </div>
  <div class="box">
  welcome
  ewewreerew rewrewr
  </div>
</div>

CSS

.wrapper{
  display: flex;
  padding: 50px
}
.box{
  width: 150px;
  padding: 0 25px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}
.box:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 1px solid red;
    transform: skewX(45deg);
}