• CSS3实现三角形


    <div class="arrow-up">
         <!--向上的三角-->
    </div>
    <div class="arrow-down">
        <!--向下的三角-->
    </div>
    <div class="arrow-left">
        <!--向左的三角-->
    </div>
    <div class="arrow-right">
        <!--向右的三角-->
    </div>

    下面用CSS3分别实现向上、下、左、右的三角形

    /*箭头向上*/
    .arrow-up {
        0; 
        height:0; 
        border-left:30px solid transparent;
        border-right:30px solid transparent;
        border-bottom:30px solid #fff;
    }
        
     /*箭头向下*/
    .arrow-down {
        0; 
        height:0; 
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #0066cc;
    }
    /*箭头向左*/
    .arrow-left {
        0; 
        height:0; 
        border-top:30px solid transparent;
        border-bottom:30px solid transparent; 
        border-right:30px solid yellow; 
    }
       
    /*箭头向右*/
    .arrow-right {
        0; 
        height:0; 
        border-top:50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid green;
    }

    好了原理我们了解了,那么我们就实战一下吧,来实现带小三角形的div框。

    首先,写出html代码:

    <div class="entry">
        <div class="entry-trangle"><!--本Div只来实现三角形,无其他作用--></div>
        hello,我出生了<br/>
        hello,我出生了<br/>
        hello,我出生了<br/>
        hello,我出生了<br/>
    </div>

    挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形,然后绝对定位、设置z-index:-1;、margin-left:-19px;,看下面css代码:

    <style type="text/css">
        *{margin:0;padding:0;}
        body{
            background:#666;
            font:14px/20px "Microsoft YaHei";
        }
        .entry{
            margin:0 auto;
            margin-top:20px;
            280px;            
            background:#fff;
            padding:10px;
       
            /*设置圆角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .entry-trangle{
            position:absolute;
            margin-left:-19px;
            0;
            height:0;
            border-top:10px solid transparent;
            border-bottom:10px solid transparent;
            border-right:10px solid #fff;
            z-index:-1;
        }
    </style>

    border-radius:5px;用来实现圆角;绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层,不影响父级div里面的内容布局。

    原文链接:http://blog.aizhet.com/web/4382.html

  • 相关阅读:
    Android WebView 获取网页的标题
    Android APK 文件自动安装
    DownloadManager 的使用
    Android Java 自定义异常
    Android NDK
    android assets文件夹资源的访问
    GitHub 基本常用知识解答2
    hbuilder egit插件的安装使用--项目文件丢失的教训
    微软收购跨平台移动应用开发商Xamarin
    Android Study 之 初识ButterKnife(8.5.1)及简单运用
  • 原文地址:https://www.cnblogs.com/huanghuali/p/6145604.html
Copyright © 2020-2023  润新知