使用裁剪路径多边形的css无法生成所需的角度

Question

我需要在右下角剪30度，我试过了。

它不能为不同的文本输入产生精确的30度.Could有人在这方面的帮助

html code:-
<div class="cut-corner">
           <p>Stay in the moment. Make every customer matter.</p>
</div>

css code:-

css:-

p {
            background: none;
            box-shadow: none;
            margin: 0;
            padding: 0;
            color: @color-primary;
            z-index:2;
            @media @medium {
                color: #fff;
               font-size: 40px;
                font-weight: bold;               
                text-transform: capitalize;
                letter-spacing: 3px;               
                max-width:50%;
                margin-bottom: 10px;
                display: inline-block;               
                padding:30px 50px 30px 40px;               
            }
        }

.bottom-right {
                p {
                    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 75%,90% 100%);
                }
            }

如果文本是“活在当下，让每一个客户都重要”，则为1>。

那么拐角大约是39度

​

​

如果文本是“停留在当前时刻”，则为2>。然后拐角大约是23度

​

​

谢谢

Answer 1

这是因为使用了%，这取决于元素的宽度和高度。这可以简单地通过使用固定值来修复，如px。

clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%);

我在这个例子中使用了calc()函数，因为两个clip-points都是从100%开始的，例如75%和90%，但是由于我不知道元素的总宽度(以像素为单位)，所以我只需从100%中减去(本例中为24px)即可。