之字形页脚改变三角形颜色
Zigzag footer change triangle color
我有一个页脚,我想用锯齿形边框来做,它工作正常,但我想将三角形的颜色更改为这种颜色 #67BA4D,我该怎么做?
这是我的代码:
.BottomFooter {
position: relative;
background-color: #67BA4D;
margin-top: 20px;
padding-top: 50px;
padding-bottom: 30px;
}
.BottomFooter:before {
content: "";
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
/* red up pointing triangle */
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}
<div class="BottomFooter">
<div class="row">
<div class="col-lg-6 col-xs-6">
<p> © 2017</p> <a href="#"></a> </div>
<div class="col-lg-6 col-xs-6">
<ul class="list-unstyled list-inline">
<li><a href="#">privacy</a></li>
<li><a href="#">call us</a></li>
</ul>
</div>
</div>
</div>
将 data:image 更改为:
data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%2367BA4D%22%2F%3E%3C%2Fsvg%3E
颜色代码在最后,在 "fill" 参数之后。
data:image/svg xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"><polygon points="0,4 4,0 8,4" fill="#67BA4D"/></svg>
我有一个页脚,我想用锯齿形边框来做,它工作正常,但我想将三角形的颜色更改为这种颜色 #67BA4D,我该怎么做? 这是我的代码:
.BottomFooter {
position: relative;
background-color: #67BA4D;
margin-top: 20px;
padding-top: 50px;
padding-bottom: 30px;
}
.BottomFooter:before {
content: "";
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
/* red up pointing triangle */
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}
<div class="BottomFooter">
<div class="row">
<div class="col-lg-6 col-xs-6">
<p> © 2017</p> <a href="#"></a> </div>
<div class="col-lg-6 col-xs-6">
<ul class="list-unstyled list-inline">
<li><a href="#">privacy</a></li>
<li><a href="#">call us</a></li>
</ul>
</div>
</div>
</div>
将 data:image 更改为:
data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%2367BA4D%22%2F%3E%3C%2Fsvg%3E
颜色代码在最后,在 "fill" 参数之后。
data:image/svg xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"><polygon points="0,4 4,0 8,4" fill="#67BA4D"/></svg>