密通学院

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3541|回复: 1

CSS实现各种形状

[复制链接]
  • TA的每日心情
    可爱
    2018-6-29 10:04
  • 289

    主题

    319

    帖子

    9万

    铜板

    超级版主

    Rank: 8Rank: 8

    积分
    93815
    QQ
    发表于 2019-4-2 17:22:46 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。

    圆形


    要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID。

    <div id="circle"></div>                              
    圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:

    #circle {
        width: 120px;
        height: 120px;
        background: #7fee1d;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }                              
    正方形


    正方形是CSS图形中最简单的图形之一,同样使用一个div,并设置一个ID。

    <div id="square"></div>                              
    正方形的CSS样式只需要设置相同的宽度和高度即可。

    #square {
        width: 120px;
        height: 120px;
        background: #f447ff;
    }                              
    长方形


    与正方形一样,CSS长方形也非常简单:

    <div id="rectangle"></div>                              
    与正方形不同的是,长方形的长度和高度为不同的值。

    #rectangle {
        width: 220px;
        height: 120px;
        background: #4da1f7;
    }                              
    椭圆形


    椭圆形是正圆形的一个变体,同样使用一个带ID的div来制作。

    <div id="oval"></div>                              
    设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:

    #oval {
        width: 200px;
        height: 100px;
        background: #e9337c;
        -webkit-border-radius: 100px / 50px;
        -moz-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }                             
    三角形


    要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。

    <div id="triangle"></div>                              
    #triangle {
        width: 0;
        height: 0;
        border-bottom: 140px solid #fcf921;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }                              
    倒三角形


    与正三角形不同的是,倒三角形要设置的是border-top、border-left和border-right三条边的属性:

    #triangle {
        width: 0;
        height: 0;
        border-top: 140px solid #20a3bf;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }                              
    左三角形


    左三角形操作的是border-top、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。

    #triangle_left {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-right: 140px solid #6bbf20;
        border-bottom: 70px solid transparent;
    }                             
    右三角形


    右三角形操作的是border-bottom、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。

    #triangle_right {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-left: 140px solid #ff5a00;
        border-bottom: 70px solid transparent;
    }                              
    菱形


    制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合,使两个正反三角形上下显示。

    #diamond {
        width: 120px;
        height: 120px;
        background: #1eff00;
    /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 60px 0 10px 310px;
    }                              
    梯形


    梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。

    #trapezium {
        height: 0;
        width: 120px;
        border-bottom: 120px solid #ec3504;
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }                              
    平行四边形


    平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

    #parallelogram {
        width: 160px;
        height: 100px;
        background: #8734f7;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
    }                              
    星形


    星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

    #star {
        width: 0;
        height: 0;
        margin: 50px 0;
        color: #fc2e5a;
        position: relative;
        display: block;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
      
    #star:before {
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        top: -45px;
        left: -65px;
        border-bottom: 80px solid #fc2e5a;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
      
    #star:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        color: #fc2e5a;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
    }                              
    六角星形

    CSS六角星形

    和五角星的制作方法不同,六角星形状的制作方法是操纵border属性来制作两半图形,然后合并它们。

    #star_six_points {
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #de34f7;
        margin: 10px auto;
    }
      
    #star_six_points:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #de34f7;
        margin: 30px 0 0 -50px;
    }                              
    五边形

    CSS五边形

    创建CSS五边形需要结合两个图形:一个梯形,然后在它的上面放一个三角形,共同组成一个五边形。

    #pentagon {
        width: 54px;
        position: relative;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: #277bab transparent;
    }
      
    #pentagon:before {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent #277bab;
    }                              
    六边形


    六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。

    #hexagon {
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
      
    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
      
    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }                              
    八角形

    CSS八角形

    八角形的制作方法也有多种方式,这里使用的是先制作两个相同的梯形,然后在两边分别放置一个三角形。

    #octagon {
        width: 100px;
        height: 100px;
        background: #ac60ec;
        position: relative;
    }
      
    #octagon:before {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }
      
    #octagon:after {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }                              
    心形

    CSS心形

    心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点。

    #heart {
        position: relative;
    }
      
    #heart:before,#heart:after {
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
      
    #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }                              
    蛋形


    蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的border-radius属性即可以制作出一个蛋形。

    #egg {
        width: 136px;
        height: 190px;
        background: #ffc000;
        display: block;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }                              
    无穷符号

    CSS无穷符号

    无穷符号可以通过border属性和设置伪元素的角度来实现。

    #infinity {
        width: 220px;
        height: 100px;
        position: relative;
    }
      
    #infinity:before,#infinity:after {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #06c999;
        -moz-border-radius: 50px 50px 0;
        border-radius: 50px 50px 0 50px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
      
    #infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px 50px 50px 0;
        border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }                              
    消息提示框


    消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。

    #comment_bubble {
        width: 140px;
        height: 100px;
        background: #088cb7;
        position: relative;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }
      
    #comment_bubble:before {
        content: "";
        width: 0;
        height: 0;
        right: 100%;
        top: 38px;
        position: absolute;
        border-top: 13px solid transparent;
        border-right: 26px solid #088cb7;
        border-bottom: 13px solid transparent;
    }                              
    吃豆人


    吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。

    #pacman {
        width: 0;
        height: 0;
        border-right: 70px solid transparent;
        border-top: 70px solid #ffde00;
        border-left: 70px solid #ffde00;
        border-bottom: 70px solid #ffde00;
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }
    如果您有业务需求,可以和我联系:http://wpa.qq.com/msgrd?V=3&amp; ... yes&amp;from=discuz
    回复

    使用道具 举报

  • TA的每日心情
    可爱
    2018-6-29 10:04
  • 289

    主题

    319

    帖子

    9万

    铜板

    超级版主

    Rank: 8Rank: 8

    积分
    93815
    QQ
     楼主| 发表于 2019-4-2 17:23:51 | 显示全部楼层

    附加一个一边内凹陷

    .btn{
                width: 100px;
                height: 30px;
                color: #FFF;
                font-size: 1.2em;
                text-align: center;
                line-height: 30px;
                background-color: black;
                top:50%;
                left: 50%;
                margin-top: -15px;
                margin-left: -50px;
                position: absolute;
            }
            .btn::after{
                width: 20px;
                height: 20px;
                content: "";        
                right: -10px;
                top: 5px;
                position: absolute;
                display: block;
                background: #FFF;
                border-radius: 20px;
            }
    如果您有业务需求,可以和我联系:http://wpa.qq.com/msgrd?V=3&amp; ... yes&amp;from=discuz
    回复 支持 反对

    使用道具 举报

    快速回复: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 感恩
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    首页|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

    GMT+8, 2024-3-29 21:00 , Processed in 0.152344 second(s), 38 queries QQ

    Powered by XMT Inc. © 2015-2025 ArrayV1.0 豫ICP备17022382号

    系统运营:密城通 豫公网安备 41018302000212 号

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