具有圓形邊框（不是角落）的CSS三角形

我有一個A標籤，其中後面的選擇器中有三角形。我需要在三角形的長邊上有一個凹形的邊框半徑，並且我還需要在三角形上有一個陰影。具有圓形邊框（不是角落）的CSS三角形

有點像Drawing a triangle with rounded bottom in CSS?但我不能使用之前的選擇器，因爲它已經在使用。

我迄今爲止代碼：

a { 
 
    background-color: #ffffff; 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 

 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 100px 0 0 100px; 
 
    border-color: transparent transparent transparent #000000; 
 
}

<a href="#">my link</a>

來源

2017-05-08 Gregor

他們用 – Durga

後，我看到了他們的解決方案，但它不會對我來說由於有一個文本鏈接，「只有」需要這個三角形工作 – Gregor

我需要有三角形的長邊的凹陷邊框半徑，我還需要在三角形陰影。

使用徑向漸變和陰影濾鏡。

a { 
 
    background-color: #ffffff; 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 1em; 
 
} 
 

 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, black 70%); 
 
    filter: drop-shadow(6px -6px 2px green) 
 
}

<a href="#">my link</a>

來源

2017-05-08 15:03:00

具有圓形邊框（不是角落）的CSS三角形

回答

相關問題