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中/ firefox應支持+ ）。
• 使用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>

輸出