html - 在悬停时缩放时显示在::before 元素上的小线

Question

当我在 上 transform:scale 时，:before 元素(左指三 Angular 形)中间有一条小线出现问题: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/

Answer 1

此变通方法实质上是使三 Angular 形的大小是现有三 Angular 形的两倍，并隐藏其中一半，因此细边框不可见。查看this related issue在 Firefox 中将三 Angular 形渲染为边框。

.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>