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 }
  • 相关阅读:
    单词统计
    第十周学习进度
    个人课程总结
    构建之法阅读笔记03
    构建之法阅读笔记02
    构建之法阅读笔记01
    第十六周学习报告
    计算最长英语单词链
    第十五周学习报告
    用户体验评价
  • 原文地址:https://www.cnblogs.com/haodayikeshu/p/5215538.html
Copyright © 2011-2022 走看看