如何添加背景顏色到CSS三角形？

Question

我試圖表明使用下面的代碼在時間軸視圖事件：

HTML

<div class="panel-body"> 
    <ul class="timeline"> 
     <li> 
      <div class="timeline-panel"> 
       <div class="timeline-heading"> 
        <h4 class="timeline-title">Timeline Event</h4> 
        <p> 
         <small class="text-muted"><i class="fa fa-time"></i> 11 hours ago via Twitter</small> 
        </p> 
       </div> 
       <div class="timeline-body"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p> 
       </div> 
      </div> 
     </li> 
     <li class="timeline-inverted"> 
      <div class="timeline-panel"> 
       <div class="timeline-heading"> 
        <h4 class="timeline-title">Timeline Event</h4> 
       </div> 
       <div class="timeline-body"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="timeline-panel"> 
       <div class="timeline-heading"> 
        <h4 class="timeline-title">Timeline Event</h4> 
       </div> 
       <div class="timeline-body"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS在撥弄更新。

我想添加背景彈出;背景顏色目前是白色的。我試圖添加背景顏色屬性，但箭頭背景不反映。

我試圖背景顏色添加到這個CSS：

.timeline > li > .timeline-panel { 
    background-color: #008000; 
    border: 1px solid #D4D4D4; 
    border-radius: 2px; 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.176); 
    float: left; 
    padding: 20px; 
    position: relative; 
    width: 36%; 
} 

預期輸出：

誰能扔光嗎？謝謝！

jsfiddle

Answer 1

DEMO

.timeline-panel { 
    background-color:red!important; 
} 
.timeline > li > .timeline-panel:after { 
    border-left:14px solid red!important; 
    border-right: 0 solid red!important; 
} 
.timeline > li.timeline-inverted > .timeline-panel:after { 
    border-left:14px solid #fff!important; 
    border-right-width: 14px!important; 
    border-left-width: 0!important; 
} 

你不需要!important如果您訂購正確的規則和/或相應修改的值，但它的出現使該規則在頁面的頂部顯示。

Answer 2

你肯定CSS的習慣。我知道，IE瀏覽器的一些版本不喜歡/理解的父/子運算符「>」

http://forums.techguy.org/web-design-development/596886-css-operator-question.html

即使Windows資源管理器預覽無法處理它們

將其更改爲：

.timeline li .timeline-panel { ... }

並查看它是否被使用。

Answer 3

這裏的關鍵是箭頭的背景顏色。 li右側的項目類.timeline-inverted，這就是我們將用於給左箭頭指定不同的CSS。

Working JSFiddle

.timeline > li > .timeline-panel { 
    background-color:green; 
} 
.timeline > li > .timeline-panel:before { 
    border-left: 15px solid green; 
} 

.timeline > li > .timeline-panel:after { 
    border-left: 14px solid green; 
} 
.timeline > li.timeline-inverted > .timeline-panel:after { 
    border-right: 14px solid green; 
}