Shape Style in Sketch from CSS

Issue

what I want to do is to achieve the image with css, but I could not achieve exactly what I want. Thanks in advance for your help on how to do it.

.alt {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background-color: #d2151e;
}
.alt:before {
    content: ' ';
    background: none;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    top: 0;
    left: 50%;
    z-index: 99;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffffff;
}
.alt:after {
    content: '';
}

<div class="alt flex">
        <div class="flex w-full h-full item-center">
            <div style="width: 40%">
            </div>
        </div>
        <div class="logo">
        </div>
</div>

Solution

Something like that ?

:root {
  --card-width: 200px;
}

.container {
  position: relative;
  background-color: #E01D2B;
  height: 180px;
  width: 600px;
  margin: auto;
  overflow: hidden;
}

.arrow {
  height: 100px;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.arrow::after {
  display: block;
  background-color: white;
  width: 20px;
  height: 20px;
  bottom: 0;
  content: '';
  transform: translate(calc(var(--card-width) / -2), 50%) rotate(45deg);
}

.card {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(var(--card-width) + 40px);
  height: 110px;
  border-top-left-radius: 1em;
  background-color: #eee;
  transform: translate(34px) skewX(-30deg);
}

<div class="container">
  <div class="arrow"></div>
  <div class="card"></div>
</div>

Answered By - Joel