具有圆形边框(不是角落)的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>
答
我需要有三角形的长边的凹陷边框半径,我还需要在三角形阴影。
使用径向渐变和阴影滤镜。
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>
他们用 – Durga
后,我看到了他们的解决方案,但它不会对我来说由于有一个文本链接,“只有”需要这个三角形工作 – Gregor