Дивизионная коробка со стрелкой треугольника - Прозрачный и граничный

Question

Дизайнер сделал для меня новый дизайн сайта, но я застрял в определенном элементе дизайна. Он включает в себя div, на который люди могут щелкнуть, но в поле есть стрелка, расширяющая правую сторону div. Ниже вы можете найти изображение, которое показывает, что я имею в виду. Просмотреть изображение здесь:

В настоящее время я смог получить этот результат, но это явно не так.

.arrow_box { 
    position: relative; 
    border: 10px solid #f7941d; 
    background-color: rgba(255,255,255,0.25); 
    width: 400px; 
    h1 { 
     font-size: 60px; 
     margin-left:40px; 
    } 
    &:after, &:before { 
     left: 100%; 
     top: 50%; 
     border: solid transparent; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
    } 
    &:after { 
     border-left-color: rgba(255,255,255,0.5); 
     border-width: 106px; 
     margin-top: -106px; 
    } 
    &:before { 
     border-left-color: #f7941d; 
     border-width: 120px; 
     margin-top: -120px; 
    } 
} 

Jsfiddle

Как вы можете видеть на изображении фон должен быть транспарант и только граница должна быть видимой, но, к сожалению, я не могу получить фон быть транспарант и стрелка, чтобы соответствовать отлично к div.

Любая помощь здесь очень ценится!

Answer 1

<div class="arrow_box"> 
    <h1>Offerte Aanvragen</h1> 
</div> 
<div class="arrow"></div> 

.arrow { 
    border: { 
    top: 10px solid #f7941d; 
    right: 10px solid #f7941d; 
    } 
    margin: -205px auto auto 324px; 
    transform: rotate(45deg); 
    width: 160px; 
    height: 160px; 
} 

Есть много способов, это один легко с помощью transform. Поверните div и введите border всего 2 стороны.

https://jsfiddle.net/Thielicious/15v9r18t/