Question

我需要在右下角切割30度，然后在下面尝试。

对于不同的文本输入，它不会产生精确的30度。对此可以有帮助吗

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>如果文本为“ Stay in the即时。” 然后拐角大约是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）。

使用剪切路径多边形的CSS无法产生所需的角度

1 个答案: