div 左上角和右下角的引號

Question

我想要一個 div 看起來像下圖，在它的左上角和右下角有引號，我想知道沒有圖像的好方法是什么。

Answer 1

使用:before和:after

 div{ padding: 25px; background: #5BC5F2; max-width: 300px; height: 100px; text-align: center; position: relative; } div:before, div:after{ position: absolute; font-size: 50px; color: #FFFFFF; font-weight: 700; } div:before{ content: '\\201c'; top: 0; left: 10px; } div:after{ content: '\\201d'; bottom: 0; right: 10px; }

 <div>text</div>

Answer 2

您可以通過兩種方式做到這一點，一種需要額外的 HTML 標記，另一種是在偽類之前和之后使用 CSS。 我在下面創建了兩個示例塊引用，第一個是分別使用帶有 open 和 close 類的 span 元素，然后我們可以在塊引用元素中定位絕對值。 第二個示例使用 :before 和 : after 偽類。 檢查“我可以使用”網站以檢查列出了您需要支持的瀏覽器： http : //caniuse.com/#feat=css-gencontent

這是一個顯示塊引用的小提琴。 隨意玩耍以匹配顏色和字體大小等...

祝一切順利

HTML

<blockquote class="example1">
    <span class="open">&ldquo;</span>
    Sumdev<br/>StackOverflow is da best
    <span class="close">&rdquo;</span>
</blockquote>

<blockquote class="example2">Sumdev<br/>StackOverflow is da best</blockquote>

CSS

blockquote {
    background: blue;
    color: white;
    padding: 20px 40px;
    position: relative;
    font-size: 20px;
}

.example1 span {
    position: absolute;
}

.example1 .open {
    top: 10px;
    left:10px;
}

.example1 .close {
    bottom: 0;
    right:10px;
}

.example2::before {
    content: '“';
    position: absolute;
    top:10px;
    left: 10px;
}
.example2::after {
    content: '”';
    position: absolute;
    bottom:0;
    right: 10px;
}

Answer 3

@Dmitriy 打敗了我，但是，是的，使用:before和:after 。 這是一些更清晰的標記。

http://jsfiddle.net/876eahr3/

HTML：

<blockquote class="quotebox quotebox--quotes">
    <cite>Some Person</cite>
    <p>Stackoverflow is the best!</p>
</blockquote>

CSS：

.quotebox,
.quotebox cite {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.3;
}

.quotebox {
    position: relative;
    color: #fff;
    background: #5bc5f2;
    padding: 60px 80px;
}

.quotebox--quotes:before,
.quotebox--quotes:after {
    position: absolute;
    font-family: serif;
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
}

.quotebox--quotes:before {
    top: 15px;
    left: 20px;
    content: '\201d';
}

.quotebox--quotes:after {
    bottom: -10px;
    right: 20px;
    content: '\201c';
}