CSS перекрывающиеся прозрачные элементы стрелки

Question

Возможно ли это с CSS? Я попытался использовать до/после псевдоэлементов, и, хотя я могу заставить что-то работать для сплошных цветов, у меня возникают проблемы с возможностью сделать это с прозрачностью.

Любые предложения?

Answer 1

Если вам не нужны черные границы вокруг каждого элемента (как можно видеть в Размещенное изображение), вы по-прежнему могут создавать необходимые формы на border следующим образом:

.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-shadow() filter подделать границу - Example Here(поддерживается в Webkit/Firefox35 +).
• Использование CSS transforms для создания фигур CSS, поэтому border будет не использован и доступен для последующих использования (поддерживается также в IE9 +).

Answer 2

Я надеюсь, что это может сработать.

li { 
 
    display: inline-block; 
 
    background: none repeat scroll 0 0 #e6e6e6; 
 
    position: relative; 
 
    list-style: none outside none; 
 
    margin-right: 5px; 
 
    line-height: 18px; 
 
    padding: 12px 17px 10px 30px; 
 
} 
 
li:first-child { 
 
    padding-left: 12px; 
 
} 
 
li:first-child:before { 
 
    border: 0 none; 
 
} 
 
li:before { 
 
    content:""; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 0; 
 
    border-left: 20px solid white; 
 
    border-bottom: 20px inset transparent; 
 
    border-top: 20px inset transparent; 
 
    width: 0; 
 
    left: 0; 
 
} 
 
li:after { 
 
    content:""; 
 
    height: 0; 
 
    border-left: 20px solid #e6e6e6; 
 
    right: -20px; 
 
    border-top: 20px inset transparent; 
 
    border-bottom: 20px inset transparent; 
 
    z-index: 2; 
 
    width: 0; 
 
    position: absolute; 
 
    top: 0; 
 
}

<ul> 
 
    <li>daTA1</li> 
 
    <li>daTA2</li> 
 
    <li>daTA3</li> 
 
    <li>daTA4</li> 
 
</ul>

Выход