Css: How to Attach an Arrow to a Div and Make It Overlap the Border

CSS: How to attach an arrow to a div and make it overlap the border

CSS solution:

http://jsfiddle.net/wn7JN/

.bubble 
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}

CSS overlapping arrow

Try this - http://jsfiddle.net/ksNr3/8/

ul {
    margin: 20px 60px;
}

ul li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;
}

ul li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul li:first-child:before {
    border-color: transparent;
}

ul li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
}

ul li.active a {
    background: orange;
    z-index: 100;
}

ul li.active a:after {
    border-left-color: orange;
}

ul li a {
    display: block;
    background: #ccc;
}

ul li a:hover {
    background: pink;
}

ul li a:hover:after {
    border-color: transparent transparent transparent pink; 
}
​

UPDATED - Made it clickable and minimized the overlapping areas - http://jsfiddle.net/ksNr3/8/

Add CSS Arrow to Top Left of Div

Try like this. Added a working copy.

.bubble {position: relative;background:#cbe8f0;height: 100px;width:170px;margin-left:30px;border-radius:2px;}
.bubble:after{  content:'';  position:absolute;  border:10px solid transparent;  border-top:10px solid #cbe8f0;  top:0px;  left:-10px;}

<div class="bubble"> </div>

Creating an arrow for a div in css

you may try using a rotated square with :before (or :after) element like this :

.imageDiv {  margin-top: 70px;  background: #fff;  display: block;  width: 555px;  height: 455px;  padding: 10px;  border-radius: 2px 2px 2px 2px;  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.bottomDiv {  position: relative;  bottom: 460px;  left: 404px;  width: 295px;  height: 295px;  background: black;}.imageDiv.bottomDiv:before {    content: " ";    position: absolute;    background: #000;    width: 30px;    height: 30px;    top: 25px;    left: -15px;    transform: rotate(45deg);}

<div class="row">  <div class="col-md-10">    <div class="imageDiv"></div>    <div class="imageDiv bottomDiv"></div>  </div></div>

CSS arrow with border add box shadow

The solution of your problem can be solved, like the one posted here:
https://codepen.io/ryanmcnz/pen/JDLhu

Basically:

1. Create a square (::after), rotate it and add box shadow.

2. Create a second square (::before) that overlaps the box shadow casted inside the balloon.

body {  background-color: #fff;}
.triangle {  position: relative;  margin: 3em;  padding: 1em;  box-sizing: border-box;  background: #fff;  border: 1px solid #fafafa;  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);}.triangle::after{    z-index: -10;    content: "";    position: absolute;    width: 0;    height: 0;    margin-left: 0;    bottom: 0;    top: calc(50% - 5px);    left:0;    box-sizing: border-box;        border: 5px solid #fff;    border-color: transparent transparent #fff #fff;        transform-origin: 0 0;    transform: rotate(45deg);        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);  }.triangle::before{    z-index: 10;    content: "";    position: absolute;    width: 0;    height: 0;    margin-left: 0;    bottom: 0;    top: calc(50% - 5px);    left:0;    box-sizing: border-box;        border: 5px solid black;    border-color: transparent transparent #fff #fff;        transform-origin: 0 0;    transform: rotate(45deg);  }

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

How to make css where arrows overlap with eachother?

Since the element position is absolute why not add a left with negative value then specify the z-index of the each arrow.
Like this

BTW: change the color of the second arrow to see the overlapping of the first arrow.

.firstArrow {  position: relative;  background: rgb(0, 82, 48);  text-align: center;  margin-right: 20px;  margin-left: 0px;  height: 50px;  float: left;  width: 330px;  z-index: 5;}
.firstArrow:before {  content: '';  position: absolute;  width: 20px;  height: 50%;  left: 100%;  top: 0;  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);}
.firstArrow:after {  content: '';  position: absolute;  width: 20px;  height: 50%;  left: 100%;  bottom: 0;  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);}
.secondArrow {  position: relative;  background: rgb(100, 82, 48);  margin-right: 10px;  float: left;  height: 50px;  width: 330px;  left: -20px;  z-index: 2;}
.secondArrow:before {  content: '';  position: absolute;  width: 20px;  height: 50%;  left: 100%;  top: 0;  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);}
.secondArrow:after {  content: '';  position: absolute;  width: 20px;  height: 50%;  left: 100%;  bottom: 0;  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);}
.container {  width: 700px;  margin: auto;}

<div class="container">  <div class="firstArrow"></div>  <div class="secondArrow"></div></div>

Aligning css arrow boxes

if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:

.arrow {
    float: left;
    width: 128px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #999;
    position: relative;
    margin-right:15px;
}
.arrow:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 128px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #f0f0f0;
}
.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #999;
}

http://jsfiddle.net/peteng/LHHzt/15/

CSS overlapping transparent arrow elements

If you don't need the black borders around each item (as can be seen in the posted image), you still could create the needed shapes by border as follows:

.timeline-unit:before, .timeline-unit:after {    top: 0;    border: solid transparent;    border-width: 1.65em;    height: 0;    width: 0;    position: absolute;    pointer-events: none;}
.timeline-unit:after {    content: " ";    left: 100%;    border-left-color: rgba(51, 51, 51, 0.8);}
.timeline-unit {    position: relative;    display: inline-block;    background: rgba(51,51,51,.8);    padding: 1em;    line-height: 1.25em;    color: #FFF;}
.timeline-unit:before { content: none; }
.timeline-unit + .timeline-unit:before {    content: " ";    border-color: rgba(51, 51, 51, 0.8);    border-left-color: transparent;    border-right: 0;    right: 100%;}
.timeline-unit + .timeline-unit {    margin-left: 2em;}
/**************  D E M O  **************/
body {  background: red;      -webkit-animation: bgcolor 4s linear 0s infinite alternate;     -moz-animation: bgcolor 4s linear 0s infinite alternate;       -o-animation: bgcolor 4s linear 0s infinite alternate;          animation: bgcolor 4s linear 0s infinite alternate;}
@-webkit-keyframes bgcolor { from { background: red; } to { background: green; }  }   @-moz-keyframes bgcolor { from { background: red; } to { background: green; }  }     @-o-keyframes bgcolor { from { background: red; } to { background: green; }  }        @keyframes bgcolor { from { background: red; } to { background: green; }  }

<div class="timeline-unit"> Timeline 1 </div><div class="timeline-unit"> Timeline 2 </div><div class="timeline-unit"> Timeline 3 </div>

Align arrows on hr

It's easier to position elements in relation to their container. Ditch the <hr>, and use horizontal-timeline as the line itself, then position the arrows absolutely in relation to it:

body {  padding-top: 30px;}
.horizontal-timeline {  position: relative;  height: 6px;  background: #29AAE3;  margin: 0;  }
.arrow-up, .arrow-down {  position: absolute;  width: 0;  height: 0;  border-left: 20px solid transparent;  border-right: 20px solid transparent;  vertical-align: baseline;}
.arrow-up {  top: -20px;  border-bottom: 20px solid #29AAE3;}
.arrow-down {  bottom: -20px;  border-top: 20px solid #29AAE3;}

<div class="horizontal-timeline">  <div class="arrow-up" style="left: 20%;"></div>  <div class="arrow-up" style="left: 60%;"></div>  <div class="arrow-down" style="left: 40%;"></div>  <div class="arrow-down" style="left: 80%;"></div></div>

---

Related Topics