怎么解，关于css三角的问题？

如图，想在个人信息下做个箭头，
本来是没啥问题，border，旋转就好。
可是问题来了，背景是有图片的，
而且不是纯色。
所以有没什么办法，在线急，挺等的。_(:з」∠)_

---

救命。强迫症犯了，最后用这种方法，感觉好二。
就是我分成了3块，1第一块固定，border-bottom；第二块三角，第三块自适应。

---

border用rgba设置透明看可不可以

---

直接切成背景图，有些时候能节约时间的不要纠结。

---

.arrow {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-left: 0;
      border-top: 2px solid gray;
      border-right: 2px solid gray;
      border-bottom: 0;
      transform: rotate(-45deg);
    }

意下如何？

+++++++++++++++修改分割线+++++++++++++++++
是我考虑不周。
我看到题主提供的图片中，斜纹背景与边框线的颜色是一样的，不妨用这样的思路：
先画边框，再画斜纹线。
代码如下：
CSS

    html, body {
        font-size: 16px;
        color: #fff;
        background: blue;
    }
    .main {
        position: relative;
        width: 96vw;
        height: 80vh;
        margin: 0 auto;
        padding: 30px;
        border: solid 1px #fff;
    }
    .arrow {
        position: absolute;
        top: -10px;
        left: 20px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: blue;
        border-left: 0;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        border-bottom: 0;
        transform: rotate(-45deg);
    }
    .stripbg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.1);/*斜纹背景图片在此平铺*/
    }

html

<div class="box">
    <h3>个人信息</h3>
    <div class="main">
        <span class="arrow"></span>
        <div class="stripbg"></div><!-- 斜纹背景 -->        
        <div class="content">
            contents here
        </div>
    </div>
</div>

最终效果如图：

---

不知道透明度会不会有效果。应该不行边框也会透明。我一般会让美工做一张带3角的背景图，其他区域透明。