css - 有没有办法使自定义 css 按钮在背景下透明？

Question

我正在尝试使用 CSS 制作自定义播放按钮。我到了我有这个的地步:

.play{
	height: 74px;
	border-width: 37px 0px 37px 67px;
	padding-right: 0;
	border-color: transparent transparent transparent #33ffff;
        margin-top:25px;
        margin-left:25px;
	margin-bottom:25px;
}

#body{
       background-color:red;
}

<div id="body">
		<button class="play" id="playB"></button>
</div>

我只是想知道是否有任何方法可以使 border-color: transparent transparent transparent #33ffff; 在有背景的情况下实际上是透明的？我不想看到灰色。

Answer 1

当然，灰色是背景。也将其设置为透明。

.play{
	height: 74px;
	border-width: 37px 0px 37px 67px;
	padding-right: 0;
	border-color: transparent transparent transparent #33ffff;
        margin-top:25px;
        margin-left:25px;
	margin-bottom:25px;
	background: transparent
}

#body{
       background-color:red;
}

<div id="body">
		<button class="play" id="playB"></button>
</div>