CSS绘制三角形并作为HTML背景使用
如图，需要绘制这样类似的图形；俩个三角形+底色新手勿喷虚心学习中；请教如何完成这样的效果，还有既然作为背景使用那么窗口有缩放的时候应该是自动裁剪的，我做的窗口缩放会导致窗...
如图，需要绘制这样类似的图形；俩个三角形+底色新手勿喷虚心学习中；请教如何完成这样的效果，还有 既然作为背景使用 那么窗口有缩放的时候 应该是自动裁剪的，我做的 窗口缩放会 导致窗口有滚动条。。
展开
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf8">
<title>untitled</title>
<link rel = "stylesheet" type = "text/css" href = "">
<style type = "text/css">
*{
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
background-color: #f3f3f3;
}
#a{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 500px solid #c1e3e7;
border-bottom: 300px solid transparent;
margin-left: calc(100% - 500px);
}
#b{
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #e2e2e2;
border-left: 350px solid transparent;
border-right: 350px solid transparent;
margin-left: calc(100% - 500px);
transform: rotate(-10deg);
left: calc(-100% + 300px);
top: -50px;
}
</style>
</head>
<body>
<div id = 'a'></div>
<div id = 'b'></div>
</body>
</html>
献丑了
关于滚动条可以通过css限制他的长宽为0px 达到隐藏滚动条的效果
::-webkit-scrollbar{
height:0px; /*滚动条宽度 width*/
}
追问
非常感谢，谦虚了
还要再麻烦请教 现在这个作为背景 那么再往上面添加div的时候要怎么写CSS才能在这个作为背景的图形上面而不是像图里 依次顺序？
追答
你可以把这两个三角放在一个容器div里 把容器div的定位设置成绝对定位 跳出文档流position:absolute
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
