CSS Dreieck mit abgerundeten Rand (nicht Ecken)

Question

I einen A-Tag habe, wo ich das Dreieck in dem nach dem Selektor aufweisen. Ich brauche einen konkaven Grenzradius auf der langen Seite des Dreiecks haben, und ich brauche auch einen Schatten auf dem Dreieck.

Kinda wie Drawing a triangle with rounded bottom in CSS?, aber ich kann das nicht vor dem Selektor verwenden, da es bereits in Gebrauch ist.

Mein Code so weit:

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>

Answer 1

Ich brauche einen konkaven Grenzradius auf der langen Seite des Dreiecks haben, und ich brauche auch einen Schatten auf dem Dreieck.

Verwenden Sie einen radialen Farbverlauf und einen Drop-Shadow-Filter.

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>