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

html-css08

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就是角度单位度。

你好，我这里用CSS实现了三种带边框三角，效果分别如图：

实例代码如下，根据你个人的情况调整代码吧：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Arrow</title>

</head>

<body>

<style>

/* scale */

.arrow,

.arrow:after{

    position: relative

    display: inline-block

    width: 0

    height: 0

    border-top: 0

    border-left: 30px dotted transparent

    border-right: 30px dotted transparent

    border-bottom: 30px dashed #000

}

.arrow:after {

    position: absolute

    top: 0

    content: ''

    transform: translateX(-50%) scale(.8)

    border-bottom: 30px dashed #fff

}

/* width & height */

.arrow1,

.arrow1:after {

    position: relative

    display: inline-block

    width: 0

    height: 0

    border-top: 0

    border-left: 30px dotted transparent

    border-right: 30px dotted transparent

    border-bottom: 30px dashed #000

}

.arrow1:after {

    position: absolute

    left: -26px 

    top: 2px

    content: ''

    width: 0 

    height: 0 

    border-top: 0 

    border-left: 26px dotted transparent 

    border-right: 26px dotted transparent 

    border-bottom: 26px dashed #fff

}

/* border & after */

.arrow2 {

    position: relative

    display: inline-block

    width: 28px

    height: 28px

    border: 0

    border-top: 2px solid #000

    border-right: 2px solid #000

    -webkit-transform: translate(7px, 14px) rotate(-45deg)

    -ms-transform: translate(7px, 14px) rotate(-45deg)

    -o-transform: translate(7px, 14px) rotate(-45deg)

    transform: translate(7px, 14px) rotate(-45deg)

}

.arrow2:after {

    position: absolute

    left: 0

    top: -2px

    width: 42px

    height: 2px

    content: ''

    border-radius: 2px

    background-color: #000

    -webkit-transform-origin: left top

    -moz-transform-origin: left top

    -ms-transform-origin: left top

    -o-transform-origin: left top

    transform-origin: left top

    -webkit-transform: rotate(45deg)

    -ms-transform: rotate(45deg)

    -o-transform: rotate(45deg)

    transform: rotate(45deg)

}

</style>

<span class="arrow"></span>

<span class="arrow1"></span>

<span class="arrow2"></span>

</body>

</html>

希望能帮到你，如有疑问请追问，望采纳~