Question

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

有没有办法让<h2>下面的箭头基本上得到所选的颜色而不会使代码太长？

除了为每个盒子制作3个不同的css代码和3个不同的箭头代码之外，还有更有效的方法吗？

基本上我希望每个<h2>和箭头都是相同的颜色，但选择了每种颜色。

<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或SASS等CSS预处理器。

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.

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

1 个答案: