<!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>

纯css3做箭头_html

 

给心灵一个纯净空间，让思想，情感，飞扬！