在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: #fff;
    font-weight: 700;
}
div:before{
    content: '\201d';
     top: 0; left: 10px;    
}
div:after{
    content: '\201c';
    bottom: 0; right: 10px;    
}

<div>text</div>