在悬停时缩放时显示在:: before元素之前的小行

Question

: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>我感到{{1}}元素（左指点三角形）在其中间有一条小线问题我不确定造成这种情况的原因......我在其他网站上看到了同样的效果，但事情并没有发生。

任何帮助将不胜感激

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

此解决方法基本上使三角形的大小是您所拥有的三角形的两倍，并隐藏了其中的一半，因此薄边框不可见。在Firefox中将渲染三角形视为边框，查看this related issue。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;  

Answer 2

如果您在http://www.cssarrowplease.com处使用生成器处的箭头，则可以省去麻烦