我正在尝试使用伪元素实现一个独特的按钮形状，使其在一端变得透明，这样背景就会显示出来。如果背景设置为纯色，则很容易获得所需的结果，因为我可以将 ::after 元素更改为相同的颜色。不过，如果背景是图像或 svg，我很难想出一个解决方案。
代码笔:https://codepen.io/codingforthefuture/pen/YzKvGvq
我将 ::after 元素设置为白色以演示问题，但您可以将其更改为粉红色以查看所需的结果。
如果您将伪元素的颜色更改为透明，则会出现问题，您会在其位置看到另一个伪元素。如果删除该伪元素，则会删除形状那一端的边框。
body{
background: pink;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
a .btn-flag {
padding: 0;
border: 0;
outline: none;
text-decoration: none;
}
a.btn-flag strong{
position: relative;
color: black;
font-size: 0.8rem;
bottom: -2px;
right: 10px;
}
.btn-flag {
display: inline-block;
font-size: 0.7rem;
min-width: 200px;
height: 35px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: black;
font-size: 7px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
.btn-flag::before,
.btn-flag::after {
content: "";
position: absolute;
top: -1px;
width: 0;
height: 0;
left: 87%;
/*should be transparent, Should acheive same effect as setting the color from #fff to pink but without knowing background set color, possible image or svg in background*/
border-right: 26px solid #fff;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
}
.btn-flag::before{
/* other color to change, but changing gets rid of border on flag end */
border-right: 26px solid red;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
left: 86.5%;
}
/****************************************************/<body>
<a href="#" class="btn-flag">
<strong>Example Text</strong>
</a>
</body>最佳答案
尝试这样的事情! https://codepen.io/anonymousjoe/pen/wvwXJwz
与其试图让伪元素拥有疯狂的形状和疯狂的边框，我们可以给每个伪元素一个有趣的旗帜形状，然后使用阴影伪造它们的轮廓。
filter: drop-shadow(0 -1px 0 red) drop-shadow(1px 0 0 red);
另一种选择是使用 SVG 作为每个伪元素的背景图像，其位置与我在此处使用的相同。
关于html - 伪元素和独特按钮形状背景的透明度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57913875/