Question

我尝试使用包含有角度边的对象创建HTML设计。

我目前使用的是background: linear-gradient()，但边缘不清晰并且像素化。我使用它的原因是因为它以％为单位，这使得响应更容易。

代码：

＆＃13;

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

#shape {
    position: absolute;
    z-index: 6;
    background: #42145f;
    width: 45%;
    height: 60%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, #42145f 50%, transparent 50%)
}

#shape2 {
	position: absolute;
   z-index: 5;
   background: #c50084;
   width: 100%;
   height: 35%;
   left: 0px;
   top: 0px;
   background: linear-gradient(to right bottom, #c50084 50%, transparent 50%)
}

#shape3 {
	  position: absolute;
    z-index: 4;
   	background: #6e2c6b;
    width: 37%;
    height: 73%; 
   	left: 0px;
    top: 27%;
    background: linear-gradient(to right top, #6e2c6b 50%, transparent 50%)
}

#shape4 {
    position: absolute;
    z-index: 3;
    background: #b71234;
    width: 100%;
    height: 14%;
    left: 0;
    top: 86%;
    background: linear-gradient(to left top, #b71234 50%, transparent 50%)
}

#shape5 {
    position: absolute;
    z-index: 0;
    background: #8d1b3d;
    width: 20%;
    height: 78%;
    left: 80%;
    top: 22%;
    background: linear-gradient(to left top, #8d1b3d 50%, transparent 50%)
}

#shape6 {
    position: absolute;
    z-index: 2;
    background: #ff5800;
    width: 22%;
    height: 59%;
    left: 78%;
    top: 0;
    background: linear-gradient(to left bottom, #ff5800 50%, transparent 50%)
}

#shape7 {
    position: absolute;
    z-index: 1;
    background: #fadc41;
    width: 30%;
    height: 54%;
    left: 70%;
    top: 0;
    background: linear-gradient(to left bottom, #fadc41 50%, transparent 50%)
}

＆＃13;

<div id="container">
	<div id="shape"></div>
	<div id="shape2"></div>
	<div id="shape3"></div>
	<div id="shape4"></div>
	<div id="shape5"></div>
	<div id="shape6"></div>
	<div id="shape7"></div>
</div>

＆＃13;

我之前使用的是div border，其边缘平滑而且border不支持％，所以在这种情况下，我认为它不会在这个解决方案中可以做出响应：

＆＃13;

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

#shape {
	  position: absolute;
   	height: 0; 
   	width: 0px;
   	border-top: 600px solid #42145f;
   	border-right: 700px solid transparent;
   	z-index: 6;
}

#shape2 {
   position: absolute;
   height: 0; 
   width: 0px;
   border-top: 375px solid #c50084;
   border-right: 1600px solid transparent;
   z-index: 5;
}

#shape3 {
    position: absolute;
    height: 0; 
    width: 0px;
    top: 200px;
    border-bottom: 780px solid #6e2c6b;
    border-right: 600px solid transparent;
    z-index: 4;
}

#shape4 {
    position: absolute;
    height: 0; 
    width: 0px;
    top: 840px;
    left: 0px;
    border-bottom: 140px solid #b71234;
    border-left: 1600px solid transparent;
    z-index: 3;
}

#shape5 {
    position: absolute;
    height: 0; 
    width: 0px;
    top: 250px;
    left: 1300px;
    border-bottom: 700px solid #8d1b3d;
    border-left: 300px solid transparent;
    z-index: 0;
}

#shape6 {
    position: absolute;
    height: 0; 
    width: 0px;
    left: 1250px;
    border-top: 600px solid #ff5800;
    border-left: 350px solid transparent;
    z-index: 2;
}

#shape7 {
    position: absolute;
    height: 0; 
    width: 0px;
    left: 1130px;
    border-top: 554px solid #fadc41;
    border-left: 470px solid transparent;
    z-index: 1;
}

＆＃13;

<div id="container">
	<div id="shape"></div>
	<div id="shape2"></div>
	<div id="shape3"></div>
	<div id="shape4"></div>
	<div id="shape5"></div>
	<div id="shape6"></div>
	<div id="shape7"></div>
</div>

＆＃13;

我知道:before和:after选项，但我不确定它是否会为有角度的<div>创建锐利边缘以及如何做到这一点。有什么帮助吗？

它应该是这样的：

Goal

Answer 1

这听起来与此问题探讨的问题类似：css transform, jagged edges in chrome

答案就是使用：-webkit-backface-visibility: hidden;

Answer 2

在这里的每个人的帮助下，我找到了应用建议的-webkit-clip-path()和clip-path()（由grinmax回答）的最终解决方案。

它在倾斜的物体上提供清晰锐利的边缘。

感谢大家的帮助！

代码是：

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

#shape {
    position: absolute;
    z-index: 6;
    background: #42145f;
    width: 40%;
    height: 55%;
    left: 0px;
    top: 0px;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
	clip-path: polygon(0 0, 0 100%, 100% 0);
}

#shape2 {
    position: absolute;
    z-index: 5;
    background: #c50084;
    width: 100%;
    height: 35%;
    left: 0px;
    top: 0px;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

#shape3 {
    position: absolute;
    z-index: 4;
    background: #6e2c6b;
    width: 37%;
    height: 73%; 
    left: 0px;
    top: 27%;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

#shape4 {
    position: absolute;
    z-index: 3;
    background: #b71234;
    width: 100%;
    height: 14%;
    left: 0;
    top: 86%;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

#shape5 {
    position: absolute;
    z-index: 0;
    background: #8d1b3d;
    width: 20%;
    height: 78%;
    left: 80%;
    top: 22%;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

#shape6 {
    position: absolute;
    z-index: 2;
    background: #ff5800;
    width: 22%;
    height: 59%;
    left: 78%;
    top: 0;
    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

#shape7 {
    position: absolute;
    z-index: 1;
    background: #fadc41;
    width: 30%;
    height: 54%;
    left: 70%;
    top: 0;
    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

<div id="container">
	<div id="shape"></div>
	<div id="shape2"></div>
	<div id="shape3"></div>
	<div id="shape4"></div>
	<div id="shape5"></div>
	<div id="shape6"></div>
	<div id="shape7"></div>
</div>

Answer 3

或者您可以简单地使用-webkit-backface-visibility：hidden;而不是-webkit属性，并以此方式缩短代码。

HTML CSS - 有角度的对象具有不清晰的边缘

3 个答案: