• CSS3:绘制图形


    CSS画图形,基本上所有的实现都是对边框的角度的调整及组合。

    以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-、-webkit- ....

    1、正常得不得了的矩形

            .square{
                width:200px;
                height:100px;
                background: red;
            }

    2、圆形,边宽为圆半径,4个扇形为一个圆,调整border-radius:50px 0 0 0;可得出不同方向的扇形

            /*圆形*/
            .circle{
                width:100px;
                height:100px;
                background: red;
                border:1px solid red;
                border-radius:50px;
            }
            /*半圆*/
            .semicircle{
                width:100px;
                height:50px;
                background: red;
                border-radius: 100px 100px 0 0;
            }
            /*扇形*/
            .fan{
                width:50px;
                height:50px;
                background: red;
                border-radius: 100px 0 0 0;
            }
            /*吃豆豆*/
            .eatman{
                width: 0;
                height: 0;
                border:50px solid red;
                border-radius: 50px;
                border-color:red transparent red red ;
            }

    3、椭圆形,水平半径100/垂直半径50

            .oval{
                width:200px;
                height:100px;
                background: red;
                border:1px solid red;
                border-radius: 100px/50px;
            }

    4、三角形,设置了内容区高宽为0,就可以看到三角形,不同角度的三角形原理都是一样的,border-color顺序是:上右下左

           .triangle{
                width:0;
                height:0;
                border:50px solid red;
              border-color: transparent transparent red transparent;
            }

    5、平行四边形,利用的是transform的变形效果

            .parallelogram{
                width: 150px;
                height: 100px;
                transform: skew(20deg);
                background: red;
            }

    其他图形都是根据以上图形展开思维的...

  • 相关阅读:
    Docker--使用
    腾讯云发送短信
    Mysql--查询基础
    flask10--数据库链接池(通用),wtforms
    Flask11--Flask-script,sqlalchemy
    序列化 json
    第五章-算术运算符
    计算机网络自顶向下的方法-第二章 应用层
    第三章-数据类型
    第三章-常量和宏定义
  • 原文地址:https://www.cnblogs.com/tinyphp/p/4747241.html
Copyright © 2020-2023  润新知