您好，我试图在浏览器的两点上实现截断边界。左上方和右上方。我正在尝试使黑色边框无法缩放。这意味着零件始终保持相同的宽度/高度，同时在底部保留额外的7％vh。目前，我正在使用剪切路径。我试图做到这一点，而无需使用svg谢谢！
<body>
<div class="section1">
<div class="section2">
<header>
Zebra
</header>
</div>
</body>
</html>
<style>
body {
margin: 0;
padding: 0;
}
.section2 {
background: white;
height: 100vh;
width: 100vw;
clip-path: polygon(1px 9px, 99% 1px, 100% 99%, 1% 100%);
}
.section1 {
background: black;
height: 93vh;
width: 100vw;
}
header {
padding: 10px;
}
</style>我没有使用SVG而是仅使用简单的CSS做到了。请尝试以下示例...
body {
margin: 0;
padding: 0;
}
.section2 {
background: white;
height: 100vh;
width: 100vw;
/*clip-path: polygon(1px 9px, 99% 1px, 100% 99%, 1% 100%);*/
}
.section1 {
background: black;
height: 93vh;
width: 100vw;
}
header {
padding: 10px;
}
.top, .left, .right {
position: absolute;
}
.top {
width: 100%;
height: 10px;
background: black;
top: 0;
transform: rotate(-0.5deg);
transform-origin: left;
}
.left {
width: 10px;
height: 93vh;
background: black;
top: 0;
left: 0;
transform: rotate(-0.5deg);
transform-origin: bottom;
}
.right {
width: 10px;
height: 93vh;
background: black;
top: 0;
right: 0;
transform: rotate(-0.5deg);
transform-origin: top;
}<div class="section1">
<div class="section2">
<header>
Zebra
</header>
<span class="top"></span>
<span class="left"></span>
<span class="right"></span>
</div>
</body>