zoukankan      html  css  js  c++  java
  • CSS实现各种形状

    .trapzoid {
        width: 40px;
        height: 100px;
        border: 50px solid blue;
        border-color: transparent transparent blue transparent;
    }

    2.圆形:设置宽高相等、border-radius:50%

        .circle {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 2px solid red;
        }

    3.球体:border-radius:50%,background:radial-gradient函数

       .sphere {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          /*  radial-gradient参数:shape size @ position,开始颜色,结束颜色 */
          background: radial-gradient(circle at 80px 70px, #ff5c8d, #000);
        }

    4.椭圆:高为宽的一半,border-radius:50%

     .ellipse {
        width: 200px;
        height: 100px;
        border-radius: 50%;
        background: blue;
    }

    5.半圆: border-radius: 50px 0 0 50px; 

        .semicircle {
          width: 50px;
          height: 100px;
          /*  "/"前四个值表示圆角的水平半径,后四个值表示圆角的垂直半径*/
          border-radius: 100% 0 0 100% / 50% 0 0 50%;
          /* 效果和用%一样 */
          /* border-radius: 50px 0 0 50px; */
          background: pink;
        }

    6.菱形

       .rhombus {
          margin-top: 100px;;
          width: 100px;
          height: 100px;
          /*  skew(30deg, 30deg);倾斜(水平方向的倾斜角度,垂直方向的倾斜角度) */
          transform: rotateZ(45deg) skew(30deg, 30deg);
          background: blue;
        }

    7.心形:由两个圆形和一个矩形进行组合得到的。

       .heart {
          margin: 50px;
          width: 100px;
          height: 100px;
          transform: rotateZ(45deg);
          background: red;
        }
        .heart::after,
        .heart::before {
          content: "";
          width: 100%;
          height: 100%;
          border-radius: 50%;
          display: block;
          background: red;
          position: absolute;
          top: -50%;
          left: 0;
        }
        .heart::before {
          top: 0;
          left: -50%;
        }

    参考:https://juejin.im/post/5c9cbddc5188252d812c6526

  • 相关阅读:
    gearman简介及安装使用
    Linux下进程的建立
    Linux中无缓冲文件I/O API
    XMLRPC for PHP简介及使用
    数据库水平切分方法
    LVS简介及使用
    进程通信之消息队列
    install docker/dockercompose
    centOS7 下安装 JDK
    iTerm2/firewall/pulsar
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12691707.html
Copyright © 2011-2022 走看看