Saya memiliki gaya berikut untuk 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; 
}

Dan ini adalah bagian HTML:

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

Hasilnya adalah:

enter image description here

Bagaimana saya bisa memperbaiki spasi putih vertikal tepat di tengah? Ini adalah bentuk yang ingin saya buat dan saya bisa melakukannya tetapi spasi putih terlihat mengganggu.

0
nope 20 November 2017, 00:35

1 menjawab

Jawaban Terbaik

Menemukan perbaikan cepat, jika Anda mengubah background-size menjadi 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/

1
JiiB 19 November 2017, 21:53