CSS实现带箭头方框怎么控制箭头位置！

html-css020

CSS实现带箭头方框怎么控制箭头位置！,第1张

你可以做一个带箭头的div；然后样式如下：

div

{

/* 箭头的样式，你自己设计，下面是旋转的样式*/

transform:rotate(90deg)

-ms-transform:rotate(90deg)/* Internet Explorer */

-moz-transform:rotate(90deg)/* Firefox */

-webkit-transform:rotate(90deg)/* Safari 和 Chrome */

-o-transform:rotate(90deg)/* Opera */

}

这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。

<style>

        .arbox{position: relative}

        .arr{

            width: 0

            height: 0

            overflow: hidden

            border-width: 10px

            border-style:dashed dashed dashed solid

            border-color:transparent transparent transparent #b2c1db

            position: absolute

            left: 15px

        }

        .block {

          background-color: #b2c1db

          height: 12px

          left: 3px

          overflow: hidden

          position: absolute

          top: 4px

          width: 12px

        }

    </style>

    

    <div class="arbox">

        <div class="arr"></div>

        <div class="block"></div>

    </div>