Shape Style in Sketch from CSS-CodePudding

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 >
        <div >
            <div style="width: 40%">
            </div>
        </div>
        <div >
        </div>
</div>

CodePudding user response：

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 >
<div >
    <div style="width: 40%">
    </div>
</div>
<div >
</div>

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
</div>