Question

请，有人可以帮我实现这种响应式布局吗？我尝试过但无法做。万分感谢。桌面版和移动版。

https://i.stack.imgur.com/PAq5L.png https://i.stack.imgur.com/CAGJV.png

Answer 1

您可以在移动设备或标签屏幕上执行类似的操作

Answer 2

这行吗？

<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;
}

Answer 3

在Internet上尝试使用此最简单的解决方案来制作多边形您可以使用CSS属性clip_path生成任何类型的形状。

-webkit-clip-path：多边形（0 0％，50％100％，0 100％）;这条线表示我们正在绘制具有三个点的多边形用x和y指定每个点的位置。您可以用px，％或任何单位术语指定位置

同样，

-webkit-clip-path：多边形（0 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>

并检查此链接，在这里我写了一些代码只是为了说明剪切路径功能，并生成您在图片中显示的输出到jsfiddle https://jsfiddle.net/awq1mL35/19/

并且您可以使用相同的clip_path属性使用媒体查询为移动设备产生相同的输出

让我知道你是否什么都不懂。我非常乐意为您提供帮助。

响应式布局，桌面移动

3 个答案: