zoukankan      html  css  js  c++  java
  • CSS3疑难问题---8、纯css实现三角形

    CSS3疑难问题---8、纯css实现三角形

    一、总结

    一句话总结:

    纯css实现三角形:原理是通过边框来实现三角形:将内容区的宽高设置为0,然后将需要的部分设置为真实的颜色,不需要的部分设置为透明色transparent
    .box{
         0;
        height: 0;
    
        border: 200px solid;
        border-left-color: transparent;
        border-right-color: green;
        border-top-color: green;
        border-bottom-color: transparent;
    }

    二、纯css实现三角形

    博客对应课程的视频位置:8、纯css实现三角形
    https://www.fanrenyi.com/video/13/180

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>纯css实现三角形</title>
     6     <style>
     7         body{
     8             /*background-color: blueviolet;*/
     9         }
    10         .box{
    11             width: 0;
    12             height: 0;
    13 
    14             border: 200px solid;
    15             border-left-color: transparent;
    16             border-right-color: green;
    17             border-top-color: green;
    18             border-bottom-color: transparent;
    19         }
    20     </style>
    21 </head>
    22 <!--
    23 将内容区的宽高设置为0,然后将需要的部分设置为真实的颜色,
    24 不需要的部分设置为透明色transparent
    25 
    26 -->
    27 <body>
    28 <div class="box"></div>
    29 </body>
    30 </html>
     
  • 相关阅读:
    抽象类
    类初始化
    final关键字
    super关键字
    继承
    常用类

    封装
    方法重载
    031:Cetus sharding
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12529348.html
Copyright © 2011-2022 走看看