JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="outer">
  <div class="inner1">
    <div class="inner1-1"></div>
  </div>
  <div class="inner2">
    <div class="inner2-1"></div>
  </div>
</div>

CSS

body {
  background: #eee;
  padding: 5em;
}

.outer {
  background: #fff;
  /* transform: rotate(50deg); */
  transform-origin: 50% 50%;
  width: 400px;
}

.inner1 {
  height: 150px;
  /* overflow: hidden; */
}

.inner1-1 {
  background: red;
  height: 300px;
  border-radius: 30px;
  transform: rotate(45deg) skew(5deg, 5deg);
}

.inner2 {
  background: lime;
  text-align: right;
  margin-top: -75px;
}

.inner2-1 {
  background: blue;
  display: inline-block;
  transform: rotate(-20deg) skew(20deg, 20deg);
  height: 100px;
  width: 50%;
  border-radius: 30px;
}