三角形の矢印が付いたDivボックス - Transparant＆border

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

あなたがイメージに見ることができるように背景がtransparantであるべきで、唯一の境界線が表示されるはずですが、悲しいことに、私は背景がtransparantすると矢印が完璧にフィットすることができません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面のみにします。このanswer..itはあなたに似ている

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