Question

我有html按钮。但是我想用CSS剪切按钮角落

我的HTML：

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

我的css：

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

但如何削减角落？

我想得到这个：

Answer 1

我将input更改为button并添加了一些css。父级具有纯色，伪元素:before添加切片。

＆＃13;

#submit {
    width: 200px;
    height: 100px;
    background: #17B9CB;
    position: relative;
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

#submit:before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    border-top: 100px solid white;
    border-right: 40px solid #17B9CB;
}

＆＃13;

<div class="subscribe-button">
  <button id="submit">SUBMIT</button>
</div>

＆＃13;

Answer 2

您可以使用clip-path属性轻松实现此目的

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

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

这是一个例子

＆＃13;

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

＆＃13;

Answer 3

您可以使用photoshop或任何您想要的任何形状和颜色的照片编辑器创建图像，然后将该图像用作网页上的按钮。这将减少许多复杂情况，例如，在调整窗口大小时。

使用CSS剪切按钮角

3 个答案: