How to create a box with a left arrow and border

Question

Example

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.

Here is a JSFiddle of what I have so far.

As you can see there are 2 problems:

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

http://stackoverflow.com/questions/8746860/how-to-handle-double-opacity-of-two-overlapping-divs — Izaaz Yunus, Mar 26 '14 at 17:41

score 2 · Accepted Answer · answered Mar 26 '14 at 19:14

Here is my best try:

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

Thanks! This is just what I'm looking for and resolves the 2 problems I mentioned. — lemon, Mar 27 '14 at 09:33

score 1 · Answer 2 · answered Mar 26 '14 at 18:24

1

You could just adjust the z-index on the parent and in the :before. It overlaps the borders but not the content.

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

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

answered Mar 26 '14 at 18:24

sceendy

11
1
3

Unfortunately there is still the issue with the borders overlapping. – lemon Mar 27 '14 at 09:29

score 0 · Answer 3 · answered Oct 30 '15 at 15:33

I know this question is old but I felt I should add my method which includes the use of 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>

How to create a box with a left arrow and border

3 Answers3

Linked

Related