css描边怎样做里边一种颜色，外边一种颜色

html-css017

css描边怎样做里边一种颜色，外边一种颜色,第1张

原理：利用两个层分别定义不同的边框颜色，一个在内，一个在外即可，在内的自适应。代码如下，已经测试通过：

<div style="width:300pxheight:30pxline-height:30pxborder:1px solid red">

    <div style="width:100%height:30pxline-height:30pxborder:1px solid green">文本内容

    </div>

</div>

<div class="arrow-up">

    <!--顶角向上的三角形-->

</div>

<style type="text/css">

.arrow-up {

    width:0 

    height:0 

    border-left:30px solid transparent

    border-right:30px solid transparent

    border-bottom:30px solid #fff

}

</style>

效果如下图：

要实现不同方向的三角形，调整四条边的 border 样式属性就行了