zoukankan      html  css  js  c++  java
  • 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

    今天给大家带来 CSS 三角形绘制方法
    代码如下:


    1 #triangle-up {
    2      0;
    3     height: 0;
    4     border-left: 50px solid transparent;
    5     border-right: 50px solid transparent;
    6     border-bottom: 100px solid red;
    7 }

     代码如下:


    #triangle-down {
         0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

     代码如下:


    1 #triangle-left {
    2      0;
    3     height: 0;
    4     border-top: 50px solid transparent;
    5     border-right: 100px solid red;
    6     border-bottom: 50px solid transparent;
    7 }

     代码如下:


    1 #triangle-right {
    2      0;
    3     height: 0;
    4     border-top: 50px solid transparent;
    5     border-left: 100px solid red;
    6     border-bottom: 50px solid transparent;
    7 }

     代码如下:


    1 #triangle-topleft {
    2      0;
    3     height: 0;
    4     border-top: 100px solid red;
    5     border-right: 100px solid transparent;
    6 }

     代码如下:


    1 #triangle-topright {
    2      0;
    3     height: 0;
    4     border-top: 100px solid red;
    5     border-left: 100px solid transparent; 
    6 }
    7  

    代码如下:


    1 #triangle-bottomleft {
    2      0;
    3     height: 0;
    4     border-bottom: 100px solid red;
    5     border-right: 100px solid transparent;
    6 }

    代码如下:


    1 #triangle-bottomright {
    2      0;
    3     height: 0;
    4     border-bottom: 100px solid red;
    5     border-left: 100px solid transparent;
    6 }
  • 相关阅读:
    Python 设置 IP 代理 访问网页 ( 用户名密码验证代理 )
    Squid 3.3 部署 HTTP代理服务器
    文件打开模式 w+ r+ a+ 区别和辨析
    Python 学习工具书
    Conference Related to social network.
    Linux 使用故障小记
    正则表达式学习连接
    再次被windows操作系统伤害之吐槽
    数据结构——线性表的顺序表示(1)
    斐波那契数列两种算法的时间复杂度
  • 原文地址:https://www.cnblogs.com/haodayikeshu/p/5215538.html
Copyright © 2011-2022 走看看