Html 如何在页脚中创建具有不同背景的右箭头，并在顶部显示社交图标

这是所需的输出：

我已经创建了社交图标，对于不同颜色的箭头，我分配了两个div，一个向左浮动，另一个向右浮动，并给它不同的背景，但我不知道如何使箭头出现。 这就是我现在得到的

我知道如何添加箭头，但我没有得到这样的背景。 这是密码

<div class="social-icons-container">
            <div class="social-icons">
                <div class="solid-container">
</div>
<div class="social-icons-img">
<ul>
<li><a href="www.facebook.com"><img src="http://www./wp-content/thesis/skins/cinch/images/facebook.png"></a></li>
<li><a href="www.google-plus.com"><img src="http://wp-content/thesis/skins/cinch/images/google.png"></a></li>
<li><a href="www.youtube.com"><img src="http:///wp-content/thesis/skins/cinch/images/youtube.png"></a></li>
<li><a href="www.pinterest.com"><img src="http:///wp-content/thesis/skins/cinch/images/pinterest.png"></a></li>
<li><a href="www.twitter.com"><img src="http:///wp-content/thesis/skins/cinch/images/twitter.png"></a></li>
<li><a href="www.linkedin.com"><img src="http:///wp-content/thesis/skins/cinch/images/linkedin.png"></a></li>
<li><a href="www.rss.com"><img src="http://www./wp-content/thesis/skins/cinch/images/rss.png"></a></li>
</ul>
</div>
            </div>
        </div>


css :
.social-icons-img {
width: 65%;
float: right;
}

.social-icons-container {
background-color: #36375c;
}
.solid-container {
width: 30%;
background-image: none;
padding: 35px 0;
padding-bottom: 20px;
float: left;
background-color: grey;
}

css:
.社会偶像{
宽度：65%；
浮动：对；
}
.社交图标容器{
背景色：#36375c；
}
.固体容器{
宽度：30%；
背景图像：无；
填充：35px0；
垫底：20px；
浮动：左；
背景颜色：灰色；
}

这是我的简单箭头演示：
要使用css制作箭头，可以使用如下代码：

<div class="arrow"></div>

.arrow {
    border: 10px solid transparent;
    border-left-color: black;
}

最新更新： 看看这个，这是你真正需要的：

---

小提琴

HTML

---

请出示你的密码。谢谢是的，我知道添加三角形，但是如何添加它，就像在输出中添加背景更改一样。我已经添加了我的代码great。但我必须像这里一样在它的右边添加社交图标。我应该在哪里添加社交媒体图标代码？

<footer></footer>

footer {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #37375D;
}
footer:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50px;
    background-color: #46475C;
}
footer:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 0px;
    width: 0px;
    border: 25px solid transparent;
    border-left-color: #46475C;
}

<div class="footer">
    <span class="foreground">
        <i class="fa fa-round fa-facebook"></i>
        <i class="fa fa-round fa-twitter"></i>
        <i class="fa fa-round fa-youtube"></i>
        <i class="fa fa-round fa-linkedin"></i>
    </span>
</div>

    .foreground{
    z-index:4;
    position: relative;
    width: 100%;
    height: 50px;
    margin-left:35%;

}
.footer {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #37375D;
}
.footer:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 50px;
    background-color: #46475C;
}
.footer:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    height: 0px;
    width: 0px;
    border: 25px solid transparent;
    border-left-color: #46475C;
}

.arrow {
    border: 10px solid transparent;
    border-left-color: black;
}


.footer{
    background:
}

.fa-round {
    padding: 0;
    border-radius: 50%;
    color: white;
    background-color: #40cdda;
    font-size: 1.30em;
    line-height: 1.5em;
    height: 1.5em;
    width: 1.5em;
    text-align:center;
    border: solid 1px white;
    margin-top:8px;

}
.fa-round:hover {
    background:#37375D;
    opacity:0.9;

}

.fa-facebook {
    background-color: #3b5998;
    margin-right: 4px;
}

.fa-twitter {
    background-color: #40cdda;
    margin-right: 4px;
}

.fa-youtube {
    background-color: #ff3132;
    margin-right: 4px;
}

.fa-linkedin {
    background-color: #0073b2;
}