CSS Overlapping Arrow

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/

Overlapping double arrows in drop down menu

try adding to the element.

    -webkit-appearance: none;
    -moz-appearance: none;

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>

Drop down menu: remove overlap between text and customised arrow in Chrome

What I would do is add padding-right that will contain your background image of the down arrow. Then change it's placement so it is not starting 88px from the left of the select box. This way the text doesn't have an opportunity to run into your arrow as it cannot enter the padded area.

.search-options-wrapper select {    -webkit-appearance: none;    -moz-appearance: none;    background: url("http://i60.tinypic.com/w888ic.png") no-repeat right center;    background-size: 12px;    padding-right: 20px;    overflow: hidden;    display: flex;    border: 0;}

<div class="search-options-wrapper">    <select id="options-primary">        <option>short text</option>        <option>Long text lalalalalaa</option>    </select></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>

CSS hover covers over arrow overlapping onto div

The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:

.topnavi {
    position: relative;
    z-index: 1;
}

OR:

.arrow-up {
    position: relative;
    z-index: 1;
}

Note: For future questions, it's better if you add the code here instead provide a link.

Overlapping CSS 3 arrows with gradient

As pointed out by Ilya Streltsyn, I needed to change the z-index and add the -webkit-transform to make it work

Why is my accordion text overlapping the arrow?

Janis Lankovskis answered this question in the comments. The solution was to do this in the CSS:

#accordion h3 { padding-left: 100px; }

CSS Overlapping Arrow