由两个直角三角形组成的页脚 [英] Footer consisting of two right triangles
本文介绍了由两个直角三角形组成的页脚的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在建立一个网站,我希望页脚看起来像这样: https://imgur.com/a/JuHHHkM
I'm making a website and I want the footer to look like this: https://imgur.com/a/JuHHHkM
基本上是彼此重叠的两个三角形.我试图制作这样的三角形:
It's basically two triangles on top of each other. I've tried to make triangles like this:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
但是因为宽度取决于您在右边框中放置的像素数,所以我不能使用宽度:100%.
But because the width depends on how many pixels you put in the border-right, I cannot use width: 100%.
还有其他选择吗? 在此先感谢
Any Alternatives? Thanks in Advance
推荐答案
您可以使用渐变轻松实现此目的:
You can easily achieve this with gradients:
.footer {
height:100px;
background:
linear-gradient(to bottom right,transparent 49.5%,blue 50%),
linear-gradient(to bottom left,transparent 49.5%,green 50%);
}
<div class="footer">
</div>
如果您不希望三角形为全角,也可以调整大小:
You can also adjust the size if you don't want the triangle to be full width:
.footer {
height:100px;
background:
linear-gradient(to bottom right,transparent 49.5%,blue 50%) right/80% 100% no-repeat,
linear-gradient(to bottom left,transparent 49.5%,green 50%) left/80% 100% no-repeat;
}
<div class="footer">
</div>
这篇关于由两个直角三角形组成的页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文