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;
    }

  • 相关阅读:
    node
    github
    [模块] pdf转图片-pdf2image
    python 15 自定义模块 随机数 时间模块
    python 14 装饰器
    python 13 内置函数II 匿名函数 闭包
    python 12 生成器 列表推导式 内置函数I
    python 11 函数名 迭代器
    python 10 形参角度 名称空间 加载顺序
    python 09 函数参数初识
  • 原文地址:https://www.cnblogs.com/wcf52web/p/5608272.html
Copyright © 2011-2022 走看看