zoukankan      html  css  js  c++  java
  • HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签

    <div class = 'test'></div>
    

    基本 CSS 代码

    .test {
       100px;
      height: 100px;
      background-color: #FFFFFF; 
      border-left: 20px solid black;  
      border-top:20px solid blue;  
      border-right: 20px solid green;  
      border-bottom:20px solid orange;  
    }
    

    效果图
    效果图

    其他需要的效果根据需求改变 border 即可得到效果。

    画三角形 CSS 代码

    .test {
       00px;
      height: 00px;
      background-color: #FFFFFF; 
      border-left: 10px solid transparent;  
      border-top:30px solid blue;  
      border-right: 10px solid transparent;  
      border-bottom:0px solid orange;  
    }
    

    效果图

    画等腰四边形 CSS 代码

    .test {
       100px;
      height: 00px;
      background-color: #FFFFFF; 
      border-left: 20px solid transparent;  
      border-top:00px solid blue;  
      border-right: 20px solid transparent;  
      border-bottom:20px solid orange;  
    }
    

    效果图

    画圆环 CSS 代码

    .test {
       100px;
      height: 100px;
      border-radius: 50%;
      background-color: #FFFFFF; 
      border-left: 20px solid black;  
      border-top:20px solid blue;  
      border-right: 20px solid green;  
      border-bottom:20px solid orange;  
    }
    

    效果图

    画平行四边形 CSS 代码

    .test {
       100px;
      height: 100px;
      background-color: red;
      border-top: 0px solid red;
      border-right: 0px solid blue;
      border-bottom: 0px solid green;
      border-left: 0px solid black;
      transform:skew(-30deg);  
    }
    

    效果图

  • 相关阅读:
    解决Linux下gets函数警告
    freopen文件操作后控制台输入输出
    Linux C编程下没有 itoa()函数的问题
    codeforces 631A Interview
    codeforces 617BChocolate
    codeforces 630KIndivisibility(容斥原理)
    codeforces 633B A Trivial Problem
    codeforces 624B Making a String
    codeforce 621A(水题)
    codeforces 624A Save Luke(水题)
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/8999355.html
Copyright © 2011-2022 走看看