CSS clip-path: 如何修改左下角斜切角并增加高度

{"title":"CSS clip-path: 如何修改左下角斜切角并增加高度","description":"本文介绍如何修改 CSS 中 clip-path 属性，实现左下角斜切角的变更倒斜并增加高度，同时保持右下角的角度高度不变。","keywords":"CSS, clip-path, polygon, 斜切角, 变更, 高度, 调整","content":"要实现左下角斜切角的变更倒斜并增加高度，可以修改 clip-path 的数值，将第一个和最后一个点的 y 坐标增加。同时，为了保持右下角的角度高度不变，需要相应地调整第十一个和第十二个点的 y 坐标。

修改后的代码如下：

clip-path: polygon(0px 40px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) 100%, 80px calc(100% - 0px), 65px calc(100% - 30px), 0% calc(100% - 15px));


transform: rotateX(180deg);