html - 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%，找到了快速修复:

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/