缩小时三角形的边框消失，放大时塌陷

Question

因此，我必须执行制表符，并通过创建带有伪元素的三角形来完成它们，这些伪元素是在边框的帮助下制作的，并应用了过滤器：将其拖放到阴影中以显示边框到边框。在100％缩放中，一切都很好，但是如果将其缩小，则带有伪元素的边框会消失，如果放大，边框会崩溃。您有什么建议可以解决这个问题？

.tab {
  display: flex;
	font-size: 14px;
	align-items: center;
	position: relative;
	margin-left: 40px;
	height: 34px;
	bottom: -6px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #f0f0f0;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000; 
}
.tab:before {
  content: '';
	left: -14px;
	position: absolute;
	border: 31px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 0px solid transparent;
	border-left: 14px solid #f0f0f0;
	bottom: 0;
	filter: drop-shadow(1px 0px 0px black);
	transform: rotateY(180deg);
	transform-origin: bottom;
}
.tab:after {
  content: '';
	right: -14px;
	position: absolute;
	border: 31px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 0px solid transparent;
	border-left: 14px solid #f0f0f0;
	bottom: 0;
	filter: drop-shadow(1px 0px 0px black);
}

<div class="tab"><a>tab1</a></div>

链接到小提琴：https://jsfiddle.net/Lkehqg0j/12