html - css 更有效率？更改箭头和标题的颜色

Question

所以我有三个盒子，每个盒子 <h2>标题区域有不同的颜色。

有没有办法让箭头低于<h2>基本上可以在不使代码太长的情况下获得选择的颜色？

有没有比为每个框制作 3 个不同的 css 代码和 3 个不同的箭头代码更有效的方法？

基本上我想要每个<h2>和箭头颜色相同，但每种颜色都被选中。

示例:http://jsfiddle.net/mGn9S/

<div class="service">
    <div class="service-img">
        <img src="images/img.png" />
    </div>
    <!--end image-->
     <h2 class="service-style color_service">test1</h2>

    <div class="service-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p>
    </div>
</div>

jsfiddle 中的完美示例是方框三“测试 3”

Answer 1

为了提高效率，使用像 LESS 这样的 CSS 预处理器。或 SASS .

CSS 解决方案:

尝试:

添加不同的类别并赋予边框颜色。

HTML:

<div class="service-text text1">...
<div class="service-text text2">...
<div class="service-text text3">...

CSS:

.service-text.text1:before{border-top-color:#2ecc71}
.service-text.text2:before{border-top-color:#e67e22}
.service-text.text3:before{border-top-color:#3498db}
.service-text:before{border-top: 30px solid;}

DEMO here.