CSS更有效？ 更改箭头和标题上的颜色

Question

So I have three boxes and each box <h2> header area has a different color.

Is there a way I can make the arrow below the <h2> basically get the color that is selected without making the code too long?

Is there a more efficient way of doing this than making 3 different css codes and 3 different arrow codes for each box?

Basically I want each <h2> and arrow to be the same color but with each color selected.

example: 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>

perfect example in the jsfiddle is box three "Test 3"

Answer 1

To make this more efficient, use CSS preprocessors like LESS or SASS .

CSS Solution:

Try:

Add different classes and give border-colors.

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.