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 }
  • 相关阅读:
    (项目)在线教育平台(九)
    (项目)在线教育平台(八)
    界面渐变特效 -- CSS实现 -- 兼容IE8
    固定背景图片铺满浏览器窗口
    时间连带上下午
    慢显示动画
    CSS强制英文、中文换行与不换行 强制英文换行
    html5 标签在 IE 下使用
    html5 兼容版本 video
    添加到收藏夹
  • 原文地址:https://www.cnblogs.com/haodayikeshu/p/5215538.html
Copyright © 2011-2022 走看看