倾斜/倾斜接头

Question

无法理解如何使用CSS制作this trick或this。我的意思是标题和标志。这条线不直。它们是倾斜的/倾斜的。 您能举个例子还是示范一下？

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

他们使用技巧来使某些边界透明以创建三角形。有关此技术的更多信息，请访问How do CSS triangles work?