Chrome中的-webkit-linear-gradient中不需要的空格

Question

我为div设计了以下样式：

.so-post-content-quote {
  background: -webkit-linear-gradient(0deg, transparent 0px, darkseagreen 0px), linear-gradient(135deg, transparent 30px, darkseagreen 20px), linear-gradient(225deg, transparent 0px, darkseagreen 0px), linear-gradient(315deg, transparent 30px, darkseagreen 0px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 50px 20px 50px 20px;
  font-size: 36px;
  color: white; 
}

这是HTML部分：

<div class="so-post-content-quote">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
</div>

结果是：

如何在中心修复垂直空白？这是我想要创建的形状，我可以做到，但空白看起来很烦人。

Answer 1

如果您将background-size更改为51％：

，则找到一个quck修复程序

的CSS：

.so-post-content-quote-fix {
  background: linear-gradient(0deg, transparent 0px, darkseagreen 0px), linear-gradient(135deg, transparent 30px, darkseagreen 20px), linear-gradient(225deg, transparent 0px, darkseagreen 0px), linear-gradient(315deg, transparent 30px, darkseagreen 0px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  padding: 50px 20px 50px 20px;
  font-size: 36px;
  color: white; 
}

的jsfiddle： https://jsfiddle.net/o2gxgz9r/18875/