css制作上下左右的箭头

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
     .arrow {
                width:0; 
                height:0; 
                position: absolute;
                top:0;
                left:0;
                display: inline-block;
            }
            .arrow-down {

                border-left:5px solid transparent;
                border-right:5px solid transparent;
                border-top:5px solid #f63;

            }
            .arrow-up {
                border-bottom:5px solid #f63;
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                top:50px;
            }
            .arrow-left {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-right:5px solid #f63; 
                top:100px;
            }
            .arrow-right {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-left:5px solid #288; 
                top:150px;
            }
    style>
head>
<body>
     <div style="position: relative">
        <span class="arrow arrow-down">span>
        <span class="arrow arrow-up">span>
        <span class="arrow arrow-left">span>
        <span class="arrow arrow-right">span>
     div>
body>
html>

 补充:css生成三角形:http://www.sucaihuo.com/tools/triangle

你可能感兴趣的:(css制作上下左右的箭头)