使用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切換按鈕角落

回答

相關問題