如何创建一个带有左箭头和边框的框

我正在尝试创建一个带有左箭头/三角形的框，其周围有不透明边框。我使用 CSS3 是为了避免使用图像。该框将包含动态内容，因此高度可能会有所不同。在附图中，您可以在左侧看到我的进度，在右侧看到我正在努力实现的目标。

这里有一个JSFiddle到目前为止我所拥有的。

如您所见，有两个问题：

1）由于不透明度，您可以看到三角形周围的边框与盒子周围的边框重叠。这是需要避免的。

2）我需要箭头/三角形相当大，这意味着箭头/三角形的右侧同样大并且与框重叠，从而模糊内容，您可以在 JSFiddle 链接和附加图像中看到这一点。

需要一些帮助和指示！提前致谢。

.map_infobox {
    margin: 30px 0 0 30px;
    position: relative;
    background: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    width: 250px; 
    height: 250px;
    border-opacity: 0.3;
    border: 5px solid rgba(0, 0, 0, .3);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.map_infobox:before{
    content: "";
    position: absolute;
    top: 50%;
    left:-21px;
    z-index: 1;
    height:30px;
    width:30px;
    margin-top: -15px;
    background:#FFF;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
     border-opacity: 0.3;
     border-left: 5px solid rgba(0, 0, 0, .3);
     border-bottom: 5px solid rgba(0, 0, 0, .3);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

<div class="map_infobox">
    <div class="title">
        Title goes here
    </div>
    <div class="copy">
        Nam nibh dolor, luctus eget lorem tincidunt, egestas scelerisque erat? Morbi consequat auctor ipsum, eu ultricies nisl aliquam venenatis. Fusce feugiat posuere lectus at dictum. Integer sagittis massa justo, sed pretium ante hendrerit eget.
    </div>
</div>

这是我最好的尝试：

CSS

.map_infobox {
    margin: 30px 0 0 30px;
    position: relative;
    background: #FFF;
    border-radius: 10px; 
    width: 250px; 
    height: 250px;
    border-opacity: 0.3;
    border: 5px solid rgba(0, 0, 0, .2);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.map_infobox:before{
    content: "";
    position: absolute;
    top: 50%;
    left: -35px;
    z-index: 1;
    height:60px;
    width:30px;
    margin-top: -15px;
    background: linear-gradient(-45deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px), linear-gradient(225deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px);    
    background-position: left 0px, right bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.map_infobox:after{
    content: "";
    position: absolute;
    top: 50%;
    left: -35px;
    z-index: 1;
    height: 48px;
    width:30px;
    margin-top: -14px;
    border-right: solid 5px white;
    border-top: solid 5px transparent;
    border-bottom: solid 5px transparent;
}

fiddle