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

Question

我正在尝试创建一个带有左箭头/三角形的框，该框周围有一个不透明的边框。我使用 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>

Answer 1

这是我最好的尝试：

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

Answer 2

您可以只调整父级和 :before 中的 z-index。 它与边框重叠，但不与内容重叠。

http://jsfiddle.net/wFU3W/2/

.map_infobox {z-index:1;}
.map_infobox:before {z-index:-1;}

Answer 3

我知道这个问题很老，但我觉得我应该添加我的方法，其中包括使用 fontAwesome。

body {
  background: #ccc;
}

.box {
  width: 50%;
  height: auto;
  border: solid 2px white; /* Change the border-color to what you want */
  border-radius: 10px;
  margin: 20px 0 0 100px;
  position: relative;
  padding: 20px;
  background: green;
  color: white;
}

.box:after,
.box:before {
  content: "\f0d9";
  font-family: fontAwesome;
  width: 60px;
  height: 60px;
  font-size: 72px;
  color: owhite;
  position: absolute;
  top: 35%;
  left: -24px; /* Projects the arrow tot he direction that we want */
}

.box:after {
  left: -21px; /* Helps create the border of the arrow */
  color: green; /* Same Background as the parent */
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="box">

  <h2>Your title goes here</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim libero ac rutrum ultricies. Aliquam fermentum vestibulum lacus et interdum. Donec luctus libero vitae lacinia sagittis. Sed sit amet elementum nisi. Etiam mauris velit, imperdiet
  nec ex a, ullamcorper lobortis dui. Donec ut est augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur suscipit ipsum quis est commodo congue. Sed fermentum ligula leo, eu iaculis dui tristique
  in. Aenean id felis et ligula semper faucibus. Curabitur at lacinia quam, id porta enim.

</div>