Question

我想让div看起来像下面的图片，在它的左上角和右下角有引号，我想知道在没有图像的情况下实现它的好方法。

enter image description here

Answer 1

使用:before和:after

＆＃13;

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

＆＃13;

<div>text</div>

＆＃13;

Answer 2

你可以这两种方式，一种是需要额外的HTML标记，另一种是在伪类之前和之后使用CSS。我在下面创建了两个示例块引用，第一个是分别使用带有open和close类的span元素，然后我们可以在块quote元素中定位绝对值。第二个示例使用：before和：after伪类。检查＆＃34;我可以使用＆＃34;列出了您需要支持的浏览器的网站：http://caniuse.com/#feat=css-gencontent

这是显示块引用的Fiddle。随意玩，以匹配颜色和字体大小等...

一切顺利

<强> HTML

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

<强> CSS

<html data-ng-app="demoApp" >
<head>
 <title>
Online Exam Syatem 
</title>

</head>
<body ><div class="container" ng-controller="RoutingController">
    <div>
        <h3>Adding Module Configuration and Routing</h3>
        <!-- ng-view handles loading partials into it based
             upon routes -->
        <div data-ng-view></div>
    </div>
</div>
<script src="angular.min.js">
<script src="angular_route.js"> </script>
</script>
<script>
    demoApp.config(function ($routeProvider) {
        alert('in');
        $routeProvider
            .when('/',
                {
                    controller: 'RoutingController',
                    templateUrl: urlBase + 'online_exam_1.html'
                })
            //Define a route that has a route parameter in it (:customerID)
            .when('/2',
                {
                    controller: 'RoutingController',
                    templateUrl: urlBase + 'online_exam_2.html'
                })
            .otherwise({ redirectTo: '/partial1' });
    });

    demoApp.controller('RoutingController', function ($scope) {
        $scope.customers = [
            { name: 'Dave Jones', city: 'Phoenix' },
            { name: 'Jamie Riley', city: 'Atlanta' },
            { name: 'Heedy Wahlin', city: 'Chandler' },
            { name: 'Thomas Winter', city: 'Seattle' }
        ];
    });
</script>
  </body>
</html>

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';
}

在div的左上角和右下角引用

3 个答案: