之字形页脚更改三角形颜色

Posted

技术标签:

【中文标题】之字形页脚更改三角形颜色【英文标题】:Zigzag footer change triangle color 【发布时间】:2017-03-26 08:24:29 【问题描述】:

我有一个页脚,我试图用锯齿形边框来做,它工作正常,但我想将三角形​​的颜色更改为这种颜色 #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>

【问题讨论】:

in u background-image: url 取子字符串fill%3D%22%23CC0000#cc0000 是一种颜色。改变这个。 【参考方案1】:

将数据:图像更改为:

  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

颜色代码在最后,在“填充”参数之后。

data:image/svg xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  ><polygon points="0,4 4,0 8,4" fill="#67BA4D"/></svg>

【讨论】:

以上是关于之字形页脚更改三角形颜色的主要内容,如果未能解决你的问题,请参考以下文章

在Python 2.7中更改字体颜色

如何更改TreeViewItem上三角形图标的颜色/不透明度?

百度2017春招笔试真题编程题集合之寻找三角形

OpenGLES 之纹理

更改 NavigationBar 人字形和标题颜色无效

根据值更改散点图中特定点的形状