html - 如何在 HTML/CSS 中设计双引号？

Question

我有一个如下所示的设计，我要在 HTML/CSS 中进行复制。设计截图如下:



目前，我可以在 fiddle 中获得此信息.在 fiddle 中，我使用了简单的双引号，但它看起来与图像中的不同。

我在 fiddle 中使用的 HTML 代码片段是:

<h6>What Do Our Customers Have to Say ?</h6>
<p>
"BPRO helped me realize the importance of cus-
tomer organization and tracking, service track-
</p>

问题陈述:

我想知道我应该在 fiddle 中进行哪些更改，以便能够复制上面的屏幕截图。

Answer 1

通常这是通过 :before 来实现的。和 :after元素利用 content 中的实际引号字符属性(或有时是 SVG)。对于这个例子，我只是将它们松散地定位到 block 引用。

blockquote {
  padding: 20px 60px;
  background: #eee;
  border-radius: 10px;
  font-family: arial;
  line-height: 1.625;
  position: relative;
}

blockquote p {
  text-align: center;
}

blockquote span {
  position: relative;
  display: inline-block;
}

blockquote span:before {
  content: "“";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  left: -40px;
  top: 40px;
  line-height: 0;
}

blockquote span:after {
  content: "”";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  right: -40px;
  bottom: -10px;
  line-height: 0;
}

<blockquote><span>BPRO helped me realize the importance of cus- tomer organization and tracking, service track- ing and just being on the top of things behind the scene. The more you grow – the more difficult this becomes – but having the right tools to keep your business organized is just as impor- tant as having the right tools to do job itself.</span>
<p>Some Person - Some Day 2018</p></blockquote>