Shape Style in Sketch from CSS - html

Question

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>

Answer 1

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>

Answer 2

Here is what you can do with css
.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: 32%;
z-index: 99;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffffff;
}
.alt:after {
content: '';
}
.logo {
background: #f0f0f0;
width: 40%;
height: 160px;
position: absolute;
right: -100px;
box-shadow: -2px 1px 4px #757575c9;
top: -30px;
border-radius: 15px 0 0 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
overflow: hidden;
}
and html is
<div class="alt flex">
<div class="flex w-full h-full item-center">
<div style="width: 40%">
</div>
</div>
<div class="logo">
</div>