Question

Example

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

您可以调整父级和之前的z-index。它重叠边框而不是内容。

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

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

Answer 3

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

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

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

3 个答案: