使用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; 
}

但如何削减角落？

我想要得到这样的：

来源

2017-05-31 name name2

查看本笔https://codepen.io/peterhry/pen/pxrkK，它会帮助你 – k185

可能重复使用CSS的[Cut Corners]（https://stackoverflow.com/questions/7324722/cut-corners - 使用 - CSS） – sol

我改变了input为button，并添加一些CSS它。父级具有纯色，并且伪元素:before添加切片。

#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; 
 
}

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

来源

2017-05-31 11:57:00

您可以轻松地做到这一点用夹子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>

来源

2017-05-31 12:11:31 Raj

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

来源

2017-05-31 12:31:26

使用CSS切换按钮角落

回答

相关问题