zoukankan      html  css  js  c++  java
  • css中border画三角形

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>CSS中border画三角形</title>
        <style>
        /*  
        等腰三角形
            .sanjiaoxing{
                0;
                height:0;
                border-bottom:100px solid yellow;
                border-left:50px solid transparent;
                border-right:50px solid transparent;
                
            }
        倒等腰三角形
            .sanjiaoxing{
                0;
                height:0;
                border-top:100px solid yellow;
                border-left:50px solid transparent;
                border-right:50px solid transparent;
            
            }
        右为底等腰三角形
            .sanjiaoxing{
                0;
                height:0;
                border-right:100px solid yellow;
                border-bottom:50px solid transparent;
                border-top:50px solid transparent;
            }
         左为底等腰三角形
            .sanjiaoxing{
                0;
                height:0;
                border-left:100px solid yellow;
                border-top:50px solid transparent;
                border-bottom:50px solid transparent;
            }
        左下为底等腰三角形
            .sanjiaoxing{
                        0;
                        height:0;
                        border-left:100px solid yellow;
                        border-top:100px solid transparent;
                    }
            .sanjiaoxing{
                        0;
                        height:0;
                        border-right:100px solid transparent;
                        border-bottom:100px solid yellow;
                            }
        右下为底等腰三角形
            .sanjiaoxing{
                                0;
                                height:0;
                                border-right:100px solid yellow;
                                border-top:100px solid transparent;
                            }
            .sanjiaoxing{
                                0;
                                height:0;
                                border-bottom:100px solid yellow;
                                border-left:100px solid transparent;
                            }
            */
                
        </style>
     </head>
     <body>
      <div>
        <div class='sanjiaoxing'>
        </div>
      </div>
     </body>
    </html>

  • 相关阅读:
    jQuery Validate 验证成功时的提示信息
    MySQL定时任务实现方法
    tp5获取器的用法。
    使用layui异步请求上传图片在tp5.1环境下出现“请对上传接口返回json”的错误的解决方法
    微信小程序底部菜单栏的使用方法
    接口测试中的接口到底是什么?
    【web自动化测试】requests-html 这个解析库,能让你更轻松的获取网页内容
    一个软件测试小白的进阶之路
    Python进阶:@property 动态属性
    百度网盘限速怎么办?
  • 原文地址:https://www.cnblogs.com/VaeVae/p/8630686.html
Copyright © 2011-2022 走看看