css - 页脚由两个直角三角形组成
问题描述
我正在制作一个网站,我希望页脚看起来像这样:https ://imgur.com/a/JuHHHkM
它基本上是两个相互重叠的三角形。我试图制作这样的三角形:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
但是因为宽度取决于你在右边框中放了多少像素,所以我不能使用宽度:100%。
有什么选择吗?提前致谢
解决方案
您可以使用渐变轻松实现此目的:
.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>
如果您不希望三角形为全宽,也可以调整大小:
.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>
推荐阅读
- google-apps-script - 当我尝试使用 moveActiveSheet 时,Google 脚本出现异常错误
- neo4j - Neo4j MERGE 对非约束属性值的约束违反
- javascript - 为什么 a1 仍然无效?是否可以让事件侦听器将输出返回到字符串?
- excel - 抓取“src”属性的web vba提取值
- python - 将多个嵌套列表组合成一个新列表的功能
- r - 使用 R 中的 Treemap 包突出显示 Treemap 的特定部分
- excel - 在 Excel 中动态合并表格
- php - 获取 PHP 文件返回的值的类型
- c# - c#将access数据库的最高id赋给一个变量
- java - KafkaListener yaml 文件中的多个主题