:after,:before的绝对定位问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .reply {

        position: relative;

        width: 200px;

        height: 80px;

        border: 1px solid rgba(243, 237, 127, 0.68);

        border-radius: 5px;

        background-color: rgba(243, 237, 127, 0.35);

    }

    

    .reply:after {

        content: '';

        width: 0px;

        height: 0px;

        border-color: transparent transparent rgba(243, 237, 127, 0.35) transparent;

        border-style: solid;

        border-width: 6px;

        position: absolute;

        top: -11px;

        border-radius: 3px;

        left: 18px;

        right: auto;

    }

    

    .reply:before {

        content: '';

        width: 0px;

        height: 0px;

        border-color: transparent transparent rgba(243, 237, 127, 0.68) transparent;

        border-style: solid;

        border-width: 7px;

        position: absolute;

        top: -14px;

        border-radius: 3px;

        left: 17px;

        right: auto;

    }

    </style>

</head>

<body>

    <div class="reply"></div>

</body>

</html>

实现简单的聊天气泡(如下图),我的问题是两个伪类中top和left的值应该如何设置呢?

http://img.mukewang.com/5821e8430001cbbc04320202.jpg

m慕光
浏览 2888回答 3
3回答

李晓健

你的效果不是正常的嘛,有什么问题?
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3