咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 652|回复: 0

[CSS] css样式常见图形效果展示的实例代码

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-12-18 17:44:56 | 显示全部楼层 |阅读模式
    简单写一下常见的基础图形,以及一些遇到的样式小图标 下图是css效果:
    css样式常见图形效果展示的实例代码-1.png


    各个图形的代码如下:
    Square(正方形)
    1. /*正方形*/
    2.    .square {
    3.       width: 60px;
    4.       height: 60px;
    5.       background: red;
    6.    }
    复制代码
    Circle(圆形)
    1. /*圆形*/ /* 可以使用百分比值(大于30%),但是低版本的Android不支持 */
    2.    .circle {
    3.       width: 60px;
    4.       height: 60px;
    5.       background: red;
    6.       -moz-border-radius: 30px;
    7.       -webkit-border-radius: 30px;
    8.       border-radius: 30px;
    9.    }
    复制代码
    Triangle Up(正三角形)
    1. /*正三角*/
    2.    .triangle-up {
    3.       width: 0;
    4.       border: 30px solid red;
    5.       border-left: 30px solid rgba(0, 0, 0, 0);
    6.       border-right: 30px solid rgba(0, 0, 0, 0);
    7.       border-top: 30px solid rgba(0, 0, 0, 0);
    8.       /*border-bottom: 30px solid rgba(0, 0, 0, 0);*/
    9.    }
    复制代码
    Triangle Down(倒三角形)
    1. /*倒三角*/
    2.    .triangle-down {
    3.       width: 0;
    4.       border: 30px solid red;
    5.       border-left: 30px solid rgba(0, 0, 0, 0);
    6.       border-right: 30px solid rgba(0, 0, 0, 0);
    7.       /*border-top: 30px solid rgba(0, 0, 0, 0);*/
    8.       border-bottom: 30px solid rgba(0, 0, 0, 0);
    9.    }
    复制代码
    Trapezoid(梯形)
    1. /*梯形*/
    2.    .trapezoid {
    3.       border-bottom: 60px solid red;
    4.       border-left: 30px solid transparent;
    5.       border-right: 30px solid transparent;
    6.       height: 0;
    7.       width: 60px;
    8.    }
    复制代码
    Parallelogram(平行四边形)
    1. /*平行四边形*/
    2.    .parallelogram {
    3.       width: 100px;
    4.       height: 60px;
    5.       -webkit-transform: skew(20deg);
    6.       -moz-transform: skew(20deg);
    7.       -o-transform: skew(20deg);
    8.       background: red;
    9.    }
    复制代码
    Pentagon(五边形)
    1. /*五边形*/
    2.    .pentagon {
    3.       margin-top: 30px;
    4.       position: relative;
    5.       width: 54px;
    6.       border-width: 50px 18px 0;
    7.       border-style: solid;
    8.       border-color: red transparent;
    9.    }
    10.    .pentagon:before {
    11.       content: "";
    12.       position: absolute;
    13.       height: 0;
    14.       width: 0;
    15.       top: -85px;
    16.       left: -18px;
    17.       border-width: 0 45px 35px;
    18.       border-style: solid;
    19.       border-color: transparent transparent red;
    20.    }
    复制代码
    Heart(心形)
    1. /*心形*/
    2.    .heart {
    3.       position: relative;
    4.       width: 100px;
    5.       height: 90px;
    6.    }
    7.    .heart:before,
    8.    .heart:after {
    9.       position: absolute;
    10.       content: "";
    11.       left: 50px;
    12.       top: 0;
    13.       width: 50px;
    14.       height: 80px;
    15.       background: red;
    16.       -moz-border-radius: 50px 50px 0 0;
    17.       border-radius: 50px 50px 0 0;
    18.       -webkit-transform: rotate(-45deg);
    19.       -moz-transform: rotate(-45deg);
    20.       -ms-transform: rotate(-45deg);
    21.       -o-transform: rotate(-45deg);
    22.       transform: rotate(-45deg);
    23.       -webkit-transform-origin: 0 100%;
    24.       -moz-transform-origin: 0 100%;
    25.       -ms-transform-origin: 0 100%;
    26.       -o-transform-origin: 0 100%;
    27.       transform-origin: 0 100%;
    28.    }
    29.    .heart:after {
    30.       left: 0;
    31.       -webkit-transform: rotate(45deg);
    32.       -moz-transform: rotate(45deg);
    33.       -ms-transform: rotate(45deg);
    34.       -o-transform: rotate(45deg);
    35.       transform: rotate(45deg);
    36.       -webkit-transform-origin: 100% 100%;
    37.       -moz-transform-origin: 100% 100%;
    38.       -ms-transform-origin: 100% 100%;
    39.       -o-transform-origin: 100% 100%;
    40.       transform-origin: 100% 100%;
    41.    }
    复制代码
    Diamond Square(菱形)
    1.   /*菱形*/
    2.    .diamond {
    3.       width: 0;
    4.       height: 0;
    5.       border: 50px solid transparent;
    6.       border-bottom-color: red;
    7.       position: relative;
    8.       top: -50px;
    9.    }
    10.    .diamond:after {
    11.       content: '';
    12.       position: absolute;
    13.       left: -50px;
    14.       top: 50px;
    15.       width: 0;
    16.       height: 0;
    17.       border: 50px solid transparent;
    18.       border-top-color: red;
    19.    }
    复制代码
    Star (5-points)(五角星)
    1. /*五角星*/
    2.    .star-five {
    3.       margin: 50px 0;
    4.       position: relative;
    5.       display: block;
    6.       color: red;
    7.       width: 0;
    8.       height: 0;
    9.       border-right: 100px solid transparent;
    10.       border-bottom: 70px solid red;
    11.       border-left: 100px solid transparent;
    12.       -moz-transform: rotate(35deg);
    13.       -webkit-transform: rotate(35deg);
    14.       -ms-transform: rotate(35deg);
    15.       -o-transform: rotate(35deg);
    16.    }
    17.    .star-five:before {
    18.       border-bottom: 80px solid red;
    19.       border-left: 30px solid transparent;
    20.       border-right: 30px solid transparent;
    21.       position: absolute;
    22.       height: 0;
    23.       width: 0;
    24.       top: -45px;
    25.       left: -65px;
    26.       display: block;
    27.       content: '';
    28.       -webkit-transform: rotate(-35deg);
    29.       -moz-transform: rotate(-35deg);
    30.       -ms-transform: rotate(-35deg);
    31.       -o-transform: rotate(-35deg);
    32.    }
    33.    .star-five:after {
    34.       position: absolute;
    35.       display: block;
    36.       color: red;
    37.       top: 3px;
    38.       left: -105px;
    39.       width: 0;
    40.       height: 0;
    41.       border-right: 100px solid transparent;
    42.       border-bottom: 70px solid red;
    43.       border-left: 100px solid transparent;
    44.       -webkit-transform: rotate(-70deg);
    45.       -moz-transform: rotate(-70deg);
    46.       -ms-transform: rotate(-70deg);
    47.       -o-transform: rotate(-70deg);
    48.       content: '';
    49.    }
    复制代码
    Moon(月亮)
    1. /*月亮*/
    2.    .moon {
    3.       width: 80px;
    4.       height: 80px;
    5.       margin: 0 30px 20px 0;
    6.       border-radius: 50%;
    7.       box-shadow: 15px 15px 0 0 red;
    8.    }
    复制代码
    Cut Diamond(钻石形)
    1. /*钻石形*/
    2.    .cut-diamond {
    3.       border-style: solid;
    4.       border-color: transparent transparent red transparent;
    5.       border-width: 0 25px 25px 25px;
    6.       height: 0;
    7.       width: 50px;
    8.       position: relative;
    9.       margin: 20px 0 50px 0;
    10.    }
    11.    .cut-diamond:after {
    12.       content: "";
    13.       position: absolute;
    14.       top: 25px;
    15.       left: -25px;
    16.       width: 0;
    17.       height: 0;
    18.       border-style: solid;
    19.       border-color: red transparent transparent transparent;
    20.       border-width: 70px 50px 0 50px;
    21.    }
    复制代码
    Egg(鸡蛋)
    1. /*鸡蛋型*/
    2.    .egg {
    3.       display: block;
    4.       width: 126px;
    5.       height: 180px;
    6.       background-color: red;
    7.       -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    8.       border-radius: 50% 50% 50% 50%  / 60% 60% 40% 40%;
    9.    }
    复制代码
    Yin Yang(太极阴阳图形)
    1. /*太极阴阳图形*/
    2.    .yin-yang {
    3.       width: 96px;
    4.       height: 48px;
    5.       background: #eee;
    6.       border-color: #000;
    7.       border-style: solid;
    8.       border-width: 2px 2px 50px 2px;
    9.       border-radius: 100%;
    10.       position: relative;
    11.    }
    12.    .yin-yang:before {
    13.       content: "";
    14.       position: absolute;
    15.       top: 50%;
    16.       left: 0;
    17.       background: #eee;
    18.       border: 18px solid #000;
    19.       border-radius: 100%;
    20.       width: 12px;
    21.       height: 12px;
    22.    }
    23.    .yin-yang:after {
    24.       content: "";
    25.       position: absolute;
    26.       top: 50%;
    27.       left: 50%;
    28.       background: #000;
    29.       border: 18px solid #eee;
    30.       border-radius: 100%;
    31.       width: 12px;
    32.       height: 12px;
    33.    }
    复制代码
    Talk Bubble(聊天框)
    1. /*聊天框*/
    2.    .talkbubble {
    3.       width: 120px;
    4.       height: 80px;
    5.       margin-left: 20px;
    6.       background: red;
    7.       position: relative;
    8.       -moz-border-radius: 10px;
    9.       -webkit-border-radius: 10px;
    10.       border-radius: 10px;
    11.    }
    复制代码
    Magnifying Glass(放大镜)
    1. /*放大镜*/
    2.    .magnifying-glass {
    3.       font-size: 10em; /* This controls the size. */
    4.       display: inline-block;
    5.       width: 0.4em;
    6.       height: 0.4em;
    7.       border: 0.1em solid red;
    8.       position: relative;
    9.       border-radius: 0.35em;
    10.    }
    11.    .magnifying-glass::before {
    12.       content: "";
    13.       display: inline-block;
    14.       position: absolute;
    15.       right: -0.25em;
    16.       bottom: -0.1em;
    17.       border-width: 0;
    18.       background: red;
    19.       width: 0.35em;
    20.       height: 0.08em;
    21.       -webkit-transform: rotate(45deg);
    22.       -moz-transform: rotate(45deg);
    23.       -ms-transform: rotate(45deg);
    24.       -o-transform: rotate(45deg);
    25.    }
    复制代码
    到此这篇关于css样式常见图形效果展示的文章就介绍到这了,更多相关css样式图形效果展示内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/css/753519.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-28 16:50

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表