具有圆形边框（不是角落）的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三角形

回答

相关问题