Question

我想在我的网站上添加下面的引用框（在Photoshop中创建），但是希望它能够“动态”创建，最好是HTML5 / CSS3（如果不能单独使用HTML / CSS，则为+ jQuery）。使用图像作为引号也是可能的，但是对于最佳响应解决方案，不希望使用图像。宽度可以固定，但高度应调整到框内的内容。

用Google搜索并搜索SO以寻找解决方案，但找不到解决方案。

但是！ ..发现了一些html blockquote元素CSS（见下文和[jsbin here] [1]）除了线条以外的所有内容，但是没有让自己“画出”它们的技能，所以如果有人会帮助你们会很感激。谢谢！

quote box

更新

立即关闭！

请参阅此处：http://jsbin.com/giwafo/1/（已锁定，克隆以进行更改）

我们的想法是在<blockquote>元素的边框顶部放置一个背景颜色的框，但我似乎无法弄清楚如何做到这一点，以便它适应的大小quote / blockquote并且无论blockquote的大小如何都是正确的。

有什么想法吗？

Answer 1

.container {
	z-index: 1;
	background: white;
	padding: 2em;
}
blockquote {
	padding: 2em 1.5em 2em 2em;
	position: relative;
	color: #999;
}
blockquote p {
	color: #555;
}
@media screen and (min-width: 300px) {
 blockquote {
 border: 1px solid gray;
}
 blockquote:before, blockquote:after {
 background-color:white;
 font-size: 3em;
 font-weight: 800;
 position: absolute;
 z-index: 20;
}
 blockquote:before {
 content:url('http://download.easyicon.net/png/534874/32/');
 width: 34px;
 height: 31px;
 left: 2px;
 top: 2px;
 -ms-transform: rotate(178deg); /* IE 9 */
 -webkit-transform: rotate(178deg); /* Chrome, Safari, Opera */
 transform: rotate(178deg);
}
 blockquote:after {
 content:url('http://download.easyicon.net/png/534874/32/');
 width: 31px;
 height: 37px;
 right: 3px;
 bottom: 0px;
}
}
blockquote cite {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: -7px;
}
blockquote cite:before {
	content:"\2014 \2009";
}

<div class="container">
  <blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <footer> <cite>Somebody famous</cite> </footer>
  </blockquote>
</div>

希望它可以帮到你

Answer 2

感谢@Jasper（见上面问题的评论），我解决了。解决方案可以在这里找到：jsbin.com/ziquzi/2。

CSS：

.container {
  z-index: 1;
  background: white;
  padding: 2em;
}
blockquote {
  padding: 2em 1.5em 2em 2em;
  position: relative;
  color: #999;
}
blockquote p {
  color: #555;
}
@media screen and (min-width: 300px) {
  blockquote {
    border: 1px solid gray;    
  }
  blockquote:before, blockquote:after {
    background-color: white;
    font-size: 3em;
    font-weight: 800;
    position: absolute;
    height: 20px;
    z-index: 10;
  }
  blockquote:before {
    content:"\201D";
    padding: 0 12px 11px 0;
    left: -8px;
    top: -8px;
  }
  blockquote:after {
    content:"\201C";
    padding: 9px 0 0 11px;
    right: -8px;
    bottom: -7px;
  }
}
blockquote cite {
  font-size: 14px;
  margin-top: 5px;
}
blockquote cite:before {
  content:"\2014 \2009";
}

HTML：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>

<div class="container">
  <blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <footer>
      <cite>Somebody famous</cite>
    </footer>
  </blockquote>
</div>
</body>
</html>

如何使用（最好）HTML5 / CSS3创建此报价框？

2 个答案: