具有漸變屬性的按鈕在漸變顏色上具有彎曲的圓角邊緣-有解無憂

我需要一個按鈕，它應該顯示兩種顏色。我能夠使用漸變屬性將顏色混合到一定程度，但無法產生確切的顏色。我希望按鈕內設定的漸變顏色具有彎曲和圓形邊緣。

下面是我的代碼：

.triangle{
  padding:20px;
  border:none;
  --g:red 135deg,yellow 0; /* the coloration */
  --p:30%;/* the position */
  background:
    conic-gradient(from -180deg at 50% var(--p)             ,var(--g)) top,
    conic-gradient(from -135deg at 50% calc(100% - var(--p)),var(--g)) bottom;
  background-size:100% 51%;
  background-repeat:no-repeat;
}

<button class='triangle'>
  Linear Check 
</button>

使用下面的代碼能夠實作以下輸出：

具有漸變屬性的按鈕在漸變顏色上具有彎曲的圓角邊緣

但我的實際要求是讓漸變顏色（藍色）的邊緣變圓而不是陡峭的邊緣。因此，它的要求類似于以下內容：

具有漸變屬性的按鈕在漸變顏色上具有彎曲的圓角邊緣

就像在影像中一樣，我希望邊緣彎曲和變圓。這可以使用漸變屬性來實作。無論如何，是否可以使用線性漸變屬性或徑向漸變來實作這一點，而不是使用圓錐形漸變。謝謝

uj5u.com熱心網友回復：

通過使用偽元素，您可以使用這些樣式來實作您提到的內容：

.triangle{
    padding:20px;
    border:none;
    background-color: yellow;
    position: relative;
    overflow: hidden;
}

.triangle::after {
    content: "";
    background-color: red;
    position: absolute;
    top: 10%;
    left: -10%;
    width: 25%;
    height: 80%;
    border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>btn gradient</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <button class='triangle'>
    Linear Check 
    </button>
</body>
</html>

如果需要，您可以更改這些值。

uj5u.com熱心網友回復：

我認為解決它的最簡單方法是使用 div 而不是按鈕。所以：

用 div 替換按鈕元素

<div class="triangle">Click me</div>

2. 調整 div 的 CSS 規則以符合您的需要為 div 添加按鈕感覺

.triangle{
  /* your CSS rules from your question... */
  
 /* Give the button the wanted radius here */
    border-radius: 15px;
}

/* Give the div button effect when hover*/
.triangle:hover {
    box-shadow: 0px 5px 15px -5px;
    transform: scale(1.03);
}

/* Give the div button effect when click */
.triangle:active {
    box-shadow: 0px 4px 4px;
    transform scale(.98);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353055.html

標籤：html css 坡度线性梯度径向梯度

上一篇：大螢屏視頻出現垂直和水平滾動條

下一篇：按鈕上的網格紋理