<div class="losung flex-container">
<a class="arr_link" href="#">ПОДРОБНЕЕ
    <div class="d1"></div>
<div class="arrow-left">

  </div>
</a>
</div>
.losung {
    background: #9D0302;
    min-height: 100px;
  display:flex;
    align-items: stretch;
}
.arr_link {
    max-width: 330px;
    box-sizing: border-box;
    width: 100%;
    background: #FECC27;
    align-items: center;
    display: flex;
    justify-content: center;
    font-family: 'Myriad Pro';
    font-style: italic;
    font-weight: bold;
    font-size: 32px;
    line-height: 100%;
    text-transform: uppercase;
    color: #001B36;
    text-decoration: none;
    margin: 0 0 0 auto;
    position: relative;
    padding-left: 50px;
}
.arrow-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
}
.arrow-left:before,
.arrow-left:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  display: block;
}
.arrow-left:before {
  top: 0;
  bottom: 50%;
  background: linear-gradient(68deg, #9D0302 0%, #9D0302 50%, transparent 50%);
}
.arrow-left:after {
  top: 50%;
  bottom: 0;
  background: linear-gradient(112deg, #9D0302 0%, #9D0302 50%, transparent 50%);
}


   

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.