搜索

首页  >  问答  >  正文

css3 - css小三角定位

<p>文字<span class="triangle-down"></span></p>

.triangle-down {
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.6rem solid darkgray;
}

怎么把小三角的位置调整到文字后面

大家讲道理大家讲道理2779 天前593

全部回复(3)我来回复

  • 黄舟

    黄舟2017-04-17 11:58:02

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p:after {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                border-left: 0.4rem solid transparent;
                border-right: 0.4rem solid transparent;
                border-top: 0.6rem solid darkgray;
            }
        </style>
    </head>
    <body>
    <p>文字</p>
    </body>
    </html>

    回复
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:58:02

    用伪元素:after

    <p>文字</p>
    p:after {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                border-left: 0.4rem solid transparent;
                border-right: 0.4rem solid transparent;
                border-top: 0.6rem solid darkgray;
            }

    回复
    0
  • PHPz

    PHPz2017-04-17 11:58:02

    position:absolute;right:0; top:0;
    文字元素的样式记得加position:relative

    回复
    0
  • 取消回复