纯css3做箭头

最新推荐文章于 2019-07-27 17:40:01 发布

weixin_30410999

最新推荐文章于 2019-07-27 17:40:01 发布

阅读量53

点赞数

原文链接：http://www.cnblogs.com/shimily/articles/7941882.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
      
        .box{width: 300px; height: 300px; position: relative;}

.left-arrow {
    position: absolute;
    left: 6%;
    top: 50%;
    overflow: hidden;
    zoom: 1;
    width: 0.4rem;
    height: 0.4rem;
    text-indent: -99999px;
    border-left: 0.05rem solid #b2b2b2;
    border-top: 0.05rem solid #b2b2b2;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.right-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    overflow: hidden;
    zoom: 1;
    width: 0.3rem;
    height: 0.3rem;
    text-indent: -99999px;
    border-left: 0.05rem solid #b2b2b2;
    border-top: 0.05rem solid #b2b2b2;
    transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

    </style>

<div class="box">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
</div>

   
    
</body>
</html>