zoukankan      html  css  js  c++  java
  • 前端复习(1)CSS图形

    画三角形

    html

    <div class="triangle"></div>

    css

    .triangle{
       0;
      height: 0;
      border-left:50px solid blue;
      border-right:50px solid green;
      border-top:50px solid yellow;
      border-bottom:50px solid red;
    }
    得以下结果
     
    然后利用transparent将其他3个边变透明即可,例
    .triangle{
       0;
      height: 0;
      border:50px solid transparent;
      border-bottom:50px solid red;
    }
    得到三角形(其他方向同理)
     
    画椭圆
    html
     
    <div class="oval"></div>
     
    css

    .oval{
       200px;
      height: 100px;
      background: red;
      -webkit-border-radius: 100px/50px;
      moz-border-radius:100px/50px;
      border-radius: 100px/50px;
    }

    画梯形
    有前面三角形的画法
    在得到这一步的CSS代码为
    .trapezoid{
       0;
      height: 0;
      border-left:50px solid blue;
      border-right:50px solid green;
      border-top:50px solid yellow;
      border-bottom:50px solid red;
    },
    如果我们此时把宽带设置为50px的话
    这样梯形其实就出来了

    .trapezoid {
       50px;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 50px solid transparent;
      border-bottom: 50px solid red;
    }

  • 相关阅读:
    JavaScript实现html购物车代码
    SQLServer2019安装教程
    SQLServer2019安装教程
    pragma指令简介
    16进制字符串转数字(C/C++,VB/VB.net,C#)
    对方网络非正常断开检测方法
    stl map高效遍历删除的方法
    memmove 和 memcpy的区别
    Socket 心跳包机制总结
    如何将内存中的位图数据绘制在DC上
  • 原文地址:https://www.cnblogs.com/xpcool/p/9626953.html
Copyright © 2011-2022 走看看