您现在的位置:首页 >> 前端 >> 内容

border用代码实现一个向上的小箭头

时间:2018/6/2 10:47:11 点击:

  核心提示:border用代码实现一个向上的小箭头!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlestyle.out{posit...

border用代码实现一个向上的小箭头

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Document</title>  
  <style>
    .out{
        position:absolute;
        top:35px;
        left: 894px;
        border-color:transparent transparent #f00 transparent;
        border-style:dashed dashed solid dashed;
        border-width:8px;
    }
    .in{
        position:absolute;
        border-color:transparent transparent #ffffff transparent;
        border-style:dashed dashed solid dashed;
        border-width:8px;
        top:-6px;
        right:-8px;
    }
    .border{
        position:relative;
        border:1px solid #999999;
        left:16px;
        width: 1000px;
        height: 50px;
    }
</style>
</head>
<body>
        <p class="border">实现小箭头2
            <p class="out">
                <p class="in"></p>
            </p>
        </p>
</body>
</html>

Tags:BO OR RD DE 
作者:网络 来源:wangjiao19