zoukankan      html  css  js  c++  java
  • CSS 实现三角形、梯形、等腰梯形

    三角形

     .graph:before{ content: ""; display: block; height: 0; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: transparent transparent red; }

    等腰三角形(只用修改border-width属性值就可以了)

    .graph:before{ content:""; display:block; width:0; height:0; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }

    直角三角形

    .graph:before{ content:""; display:block; width:0; height:0; border-width:0px 0px 200px 200px; border-style:none solid solid; border-color:transparent transparent red; }

    梯形

    .graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 20px 60px 145px;content:"";display:block;height:0;left:-10px;width:200px;}

    等腰梯形

    .graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 45px 45px;content:"";display:block;height:0;left:-10px;width:200px;}

     等腰梯形旋转

    .promotion-contain2 {
        content:"";
        display:block;
        height:0;
        border-width:0px 15px 15px;
        border-style:none solid solid;
        border-color:transparent transparent red;
        position:absolute;
        -moz-transform:rotate(-45deg);/*FF浏览器*/
        -webkit-transform:rotate(-45deg);/*chrome浏览器*/
        -o-transform:rotate(-45deg);/*oprea浏览器*/
        -ms-transform:rotate(-45deg);/*IE浏览器*/
        left:-10px;
        top:17px;
        width:40px;
    }

  • 相关阅读:
    过滤指定目录下指定后缀名文件
    Oracle 存储过程创建表
    编码测试之控制条件筛选心得——AE二次开发篇
    log4j配置祥解 (转)
    手机浏览器的viewport(视觉窗口)
    git 常用技巧
    添加eclipse的字体样式
    如何检测android 文件签名成功(转帖)
    javascript 解析json
    身份证正则表达式
  • 原文地址:https://www.cnblogs.com/wcf52web/p/5608272.html
Copyright © 2011-2022 走看看