如何在HTML / CSS中设计双引号逗号？ [英] How to design double inverted commas in HTML/CSS?

问题描述

我具有如下所示的设计，可以在HTML / CSS中进行复制。设计的屏幕截图如下所示：

I have a design as shown below which I to replicate in HTML/CSS. The screen-shot of the design as shown below:

此刻，我可以在小提琴中获得它。在小提琴中，我使用了简单的双倒置逗号，但是看起来与图片中的不一样。

At this moment, I am able to get this in fiddle. In the fiddle, I have used simple double inverted commas but it doesn't look like the same as in the image.

我在小提琴中使用的HTML代码段是：

The snippets of HTML code which I have used in the fiddle is:

<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>

问题陈述：

I

推荐答案

这通常是通过：before 和：after 元素使用 content 属性（或有时是SVG）。在这个示例中，我只是将它们宽松地定位在blockquote上。

Typically this is achieved with a :before and :after element utilizing the actual quotation characters in the content attribute (or sometimes an SVG). For this example I just loosely positioned them to the blockquote.

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>

这篇关于如何在HTML / CSS中设计双引号逗号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！