响应式布局，桌面移动
拜托，有人能帮我实现这个响应性的布局吗？我试过但做不到。非常感谢。桌面和移动版本。
https://i.stack.imgur.com/PAq5L.png https://i.stack.imgur.com/CAGJV.png
回答 3
Stack Overflow用户
发布于 2019-03-02 10:30:06
这行得通吗？
<div class="purple-triangle">
</div>
<div class="black-triangle"></div>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus felis, suscipit ac justo eu, dignissim euismod elit. Aenean eros enim, ornare sit amet vehicula quis, auctor vitae felis. Maecenas eu auctor purus. Donec eget mauris a diam tempus volutpat. In sed ornare neque. Praesent laoreet blandit justo porta hendrerit. Proin vel magna ac nisi condimentum rhoncus eu in est. Aliquam erat volutpat.
</p></div>
.black-triangle{
position: absolute;
top:0;
left:0;
padding:0;
margin:0;
width: 0;
height: 0;
border-left: 50% solid transparent;
border-right: 50vw solid transparent;
border-bottom: 100vh solid black;
}
.purple-triangle{
position: absolute;
top:-50px;
left:0;
padding:0;
margin:0;
width: 0;
height: 0;
border-left: 50% solid transparent;
border-right: 100vw solid transparent;
border-top: 100vh solid purple;
}
.text{
width: 30%;
float: right;
margin-top: 20vh;
margin-right: 40px;
}Stack Overflow用户
发布于 2019-03-02 10:08:18
您可以在移动或选项卡屏幕上这样做
Stack Overflow用户
发布于 2019-03-02 10:42:12
尝试这个最简单的解决方案，在互联网上制作多边形形状，您可以使用CSS属性clip_path生成任意类型的形状。
-webkit-剪贴画路径:多边形(0 0%，50% 100%，0 100%)；这一行表示我们正在绘制具有三个点的多边形，并根据x和y指定每个点的位置。您可以根据px、%或任何单位术语指定位置。
同样的，
-webkit-剪辑路径:多边形(0 0,100% 0,100% 0,100% 20%,0 85%)；这一行表示我们正在绘制有四点的多边形。
#CSS CODE
*{
padidng:0;
margin:0;
}
#first{
background-color:purple;
height:350px;
width:100%;
-webkit-clip-path: polygon(0 0,100% 0,100% 20%,0 85%);
}
#last{
position:relative;
top:-200px;
background-color: black;
height:350px;
width:100%;
-webkit-clip-path: polygon(0 0%, 50% 100%, 0 100%);
}和HTML代码
#HTML CODE
<html>
<head>
</head>
<body>
<div id="first">
</div>
<div>
</div>
<div id="last">
</div>
</body>
</html>然后检查这个链接，在这里，我编写了一些代码来演示剪辑路径功能，并生成您在图片中显示的输出，以实现https://jsfiddle.net/awq1mL35/19/。
您可以使用相同的clip_path属性生成相同的输出，用于使用媒体查询。
如果你什么都不懂就告诉我。我非常乐意帮助你。
https://stackoverflow.com/questions/54956896
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号