纯CSS写出小三角形

http://www.qdxw.net 发表时间: 2016-06-10 来源: 青岛星网

小三角形作为网页常用小图标，我们一般都是用图片格式表达，今天青岛星网跟大家分享：纯CSS写出小三角形，无图片单纯CSS编写的三角形哦。

纯CSS写出小三角形代码如下

<!DOCTYPE HTML>  
<html lang="en-US">  
<head>  
    <meta charset="gb2312">  
    <title></title>  
    <style type="text/css">  
        ＊{ margin:0; padding:0;}  
        body{ background:#ccc;}  
        .less{ border-style:solid dashed dashed dashed; border-color:red transparent transparent transparent; border-width:10px 10px 0 10px;}  
        .more{ border-style:dashed dashed solid dashed; border-color: transparent transparent red transparent; border-width:0 10px 10px 10px;}/* dashed 边框透明 */  
   
         a{ display:inline-block; position:relative; height:0; overflow:hidden; vertical-align:middle;}/* height:0;解决i.e.下显示高度问题 */  
   
        .block{ width:200px; height:60px; line-height:60px; text-align:center; background:green; overflow:hidden; vertical-align:middle;}  
    </style>  
</head>  
<body>  
    <div class="block">  
        <a href="" class="less"></a>  
    </div>  
    <br />  
   
    <div class="block">  
        <a href="" class="more"></a>  
    </div>  
   
</body>  
</html>

效果如下

纯CSS写出小三角形