如何创建一个带有左箭头和边框的框 [英] How to create a box with a left arrow and border

问题描述

我试图创建一个带有左箭头/三角形的框，框中有一个不透明的边框。我使用CSS3为了避免使用图像。该框将包含动态内容，因此高度可能会有所不同。在附加的图片中，您可以在左侧查看我的进度，以及我要在右侧实现什么。

I'm trying to create a box with a left arrow/triangle which has a opaque border surrounding it. I'm using CSS3 in order to avoid using images. The box will contain dynamic content so the height will likely vary. In the image attached you can see my progress on the left and what I am trying to achieve on the right.

这是一个 JSFiddle 我到目前为止。

Here is a JSFiddle of what I have so far.

正如你可以看到那里是2个问题：

As you can see there are 2 problems:

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

1) Due to the opacity you can see the border surrounding the triangle overlaps the border surrounding the box. This needs to be avoided.

2）我需要的箭头/三角形是相当大，这意味着箭头/三角形的右侧同样大，重叠这个框因此模糊了内容，你可以在JSFiddle链接和图像中看到这一点。

2) I need the arrow/triangle to be rather large, which means the right side of the arrow/triangle is equally as large and overlaps the box thus obscuring content, you can see this in the JSFiddle link and image attached.

需要一些帮助和指针！提前感谢。

Need some help and pointers! Thanks in advance.

.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

这篇关于如何创建一个带有左箭头和边框的框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！