带有三角形侧箭头的Div框 - Transparant＆amp;边境

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并仅在{2}侧设置border样式。

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