html - 悬停缩放时，在:: before元素上显示一小行

我在:before元素（向左的三角形）上遇到一条小线时遇到问题，当我在transform: scale上单击:hover时，我不确定是什么原因造成的。对其他网站的影响，并且不会发生。

任何帮助，将不胜感激

.container{
  display: flex;
  height: 45vw;
  width: 100%;
  background: black;
}

.image{
  background: blue;
  width: 50%;
  height: 100%
}

.text{
  background: yellow;
  width: 50%;
  height: 100%
}

.text:before{
  content: '';
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 50%;
  left: -17px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid yellow;
}

.text:hover{
  transform: scale(1.1);
  transition: 0.4s;
}

<div class="container">
  <div class="image">

  </div>
  <div class="text">

  </div>
</div>

在jsFiddle上查看：https://jsfiddle.net/wap184pe/1/

最佳答案

这种解决方法实际上使三角形的大小是您所拥有的三角形的两倍，并且将其隐藏了一半，因此看不到细边框。签出this related issue，并在Firefox中将三角形渲染为边框。

.container{
  display: flex;
  height: 45vw;
  width: 100%;
  background: black;
}

.image{
  background: blue;
  width: 50%;
  height: 100%
}

.text{
  background: yellow;
  width: 50%;
  height: 100%
}

.text:before{
  content: '';
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 35%;
  height: 0;
  width: 0;
  border: 36px solid transparent;
  border-right: 0;
  border-top-color: yellow;
  transform: rotate(225deg);
}

.text:hover{
  transform: scale(1.1);
  transition: 0.4s;
}

<div class="container">
  <div class="image">

  </div>
  <div class="text">

  </div>
</div>

关于html - 悬停缩放时，在:: before元素上显示一小行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47934423/