html - 倾斜/倾斜的表头

Question

无法理解如何制作this trick或 this与CSS。我的意思是标题和标志。这条线不直。它们是倾斜的/倾斜的边界。 能否请您举个例子或只是举例说明这是可行的？

Answer 1

看看https://jsfiddle.net/josedvq/3HG6d/

HTML

<div class="triangle-up-left"></div>

CSS

.triangle-up-left {
    width: 0;
    height: 0;
    padding-bottom: 10%;
    padding-left: 10%;
    overflow: hidden;
}
.triangle-up-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

他们使用了一种技巧，您可以让一些边框透明以创建三 Angular 形。有关此技术的更多信息，请访问 How do CSS triangles work?