gpt4 book ai didi

html - 使用 CSS 剪切按钮 Angular

转载 作者:太空宇宙 更新时间:2023-11-03 22:40:18 25 4
gpt4 key购买 nike

我有 html 按钮。但是我想使用 CSS 来切按钮 Angular

我的 html:

<div class="subscribe-button">
<input type="submit" value="Submit">
</div>

我的CSS:

.subscribe-button input{
color: #fff;
background-color: #6ab8c9;
padding: 10px 45px 0;
}

但是如何偷工减料呢?

我想得到这个:

enter image description here

最佳答案

您可以使用 clip-path 属性轻松实现这一点

clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);

您可以使用 Clippy轻松生成各种形状的剪辑路径代码

举个例子

<html>
<style>

#btn2{
width: 150px;
height: 100px;
background: lightblue;
-webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
}

</style>
<body>
<button id="btn2">Hello</button>
</body>
</html>

关于html - 使用 CSS 剪切按钮 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44283877/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com