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