如何添加背景颜色到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; 
}