css 画箭头

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        *

        {

            margin: 0px;

            padding: 0px;

        }

        #show

        {

            margin: 10px auto;

            position: absolute;

            top: 50px;

            left: 50px;

            text-align: center;

        }

        #some

        {

            width: 200px;

            margin-left: 100px;

            text-align: center;

            position: absolute;

            background-color: rgba(, , ,0.6);

            border-radius: 5px;

        }

        #info

        {

            width: 400px;

            height: 300px;

            position: absolute;

        }

        #outarrow

        {

            border-color: transparent transparent #efefef;

            border-style: solid;

            border-width: 16px;

            height: ;

            width: ;

            position: absolute;

            top: 0px;

            left: 184px;

        }

        #innerarrow

        {

            border-color: transparent transparent white;

            border-style: solid;

            border-width: 16px;

            height: ;

            width: ;

            position: absolute;

            top: 0px;

            left: 184px;

            margin-top: 6px;

        }

        #content

        {

            border: 4px solid;

            border-radius: 4px;

            border-color: #efefef;

            width: 400px;

            margin: 32px auto 0px;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

            #content p

            {

                text-align: left;

                text-indent: 20px;

            }

    </style>

</head>

<body>

    <div id="show">

        <div id="some">下面就是箭头效果</div>

        <div id="info">

            <div id="outarrow"></div>

            <div id="innerarrow"></div>

            <div id="content">

                <h1>使用边界产生箭头</h1>

                <p>要点1：设置盒子的宽高均为0，只设置边界宽度</p>

                <p>要点2：可以通过border-style改变效果</p>

            </div>

        </div>

    </div>

</body>

</html>
显示效果：
巴特西

css 画箭头

最新文章

热门文章
