怎样运用CSS绘制各种样式的图形

发布时间：2023-08-25 14:33:54 所属栏目：语言来源：

导读：这篇文章给大家分享的是“如何使用CSS绘制各种样式的图形”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

一、三角形

border边框设置

这篇文章给大家分享的是“如何使用CSS绘制各种样式的图形”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

一、三角形

border边框设置

代码：

width: 300px;

height: 300px;

background: red;

border: 40px solid black;

border-left-color: blue;

border-bottom-color: yellow;

border-right-color: pink;

border-top-color: #008800;

花特殊图形的时候需要将宽高设置成0

代码：

width: 0;

height: 0;

background: transparent;

border: 40px solid black;

border-left-color: blue;

border-bottom-color: yellow;

border-right-color: pink;

border-top-color: #008800;

1、等腰三角形：将其他的边的border设置成透明

代码：

width:0;

height: 0;

background: transparent;

border: 40px solid black;

border-left-color: transparent;

border-bottom-color: yellow;

border-right-color: transparent;

border-top-color: transparent;

2、直角三角形

代码：先写出个完整的div,再使用border-***-width：0；来截取三角形

border-top-width/border-bottom-width:0=》就是在中间横着劈开一道，保留上边或者下边

border-left-width/border-right-width:0=》就是在中间竖着劈开一道，保留左边或者右边

.rightAngle{

    width: 0;

    height: 0;

    background: transparent;

    border: 40px solid black;

    border-left-color: blue;

    border-bottom-color: yellow;

    border-right-color: pink;

    border-top-color: #008800;

    border-top-width: 0;

    border-left-width: 0;

    border-right-color: transparent;

}

3、梯形

彩带图形：

代码：

width: 300px;

height: 0;

background: transparent;

border: 40px solid #008800;

border-left-color: transparent;

border-bottom-color: yellow;

border-right-color: transparent;

border-top-color: #008800;

梯形：

代码：将上面彩带图形的宽度减少，然后将上面的梯形设置为透明

width: 100px;

height: 0;

background: transparent;

border: 40px solid #008800;

border-left-color: transparent;

border-bottom-color: #008800;

border-right-color: transparent;

border-top-color: transparent;

总结：通过设置长度和高度，以及设置border的透明度来拼凑成想要的图形 4、圆形

4、图形：

代码：使用border-radius:50%;

.circle{

    width: 100px;

    height: 100px;

    border: 0;

    border-radius: 50%;

    background-color: orange;

}

5、椭圆

图形：

代码：

.ellipse{

    width: 200px;

    height: 120px;

    background-color: orange;

    border-top-left-radius: 50%;

    border-top-right-radius: 50%;

    border-bottom-left-radius: 50%;

    border-bottom-right-radius: 50%;

}

总结：

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。

在使用border-radius时，有几点可能需要注意一下：

border-radius，可以分别对4个角进行设定。例如上图：border-top-left-radius: apx bpx;

border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px，也就是半径为10px的圆形（圆角部分）。

当使用百分比数值时，a 相对于width， b相对于height 6、特殊图形

（1）斜边三角形

图形：

代码：先画个等边三角形，然后再转换角度

.beveledTriangle{

    margin: 50px;

    width: 0;

    height: 0;

    border: 20px solid #2b81af;

    border-top-width: 40px;

    border-top-color:transparent;

    border-bottom-width: 40px;

    border-bottom-color: transparent;

    border-left-width: 0;

    border-right-color: #008800;

    border-right-width: 25px;

    transform-origin:center center;

    transform:rotateY(-180deg) rotate(-44deg) ;

}

（2）绘制一条“小尾巴”

图形：

代码：

.tail{

    margin: 50px;

    width: 100px;

    height: 70px;

    border-top-right-radius: 70px 70px;

    border-right:6px solid #000000;

}

总结：当对一个角应用圆角样式，如果这个角相邻的两个boeder一个有定义而一个无定义，那么绘制的结果就是有粗到细的“小尾巴了”

7、绘制QQ图案（取自AlloyTeam案例）

图形：

代码：

<a id="qq" href="http://www.alloyteam.com" target="_blank">

    <div class='head'>

        <div class='left eye'>

            <div class="innerLeftEye">

            </div>

        </div>

        <div class='right eye'>

            <div class="innerRightEye">

                <div class="fix"></div>

            </div>

        </div>

        <div class='mouthTopContainer'>

            <div class='mouthTop'></div>

        </div>

        <div class="mouthBottomContainer">

            <div class="mouthBottom"></div>

        </div>

        <div class="lipsContainer">

            <div class="lips">

                <div class="lipShadow left">

                </div>

                <div class="lipShadow right">

                </div>

            </div>

        </div>

    </div>

    <div class="body">

        <div class="innerWrapper">

            <div class="inner">

            </div>

        </div>

        <div class="outterWrapper">

            <div class = 'outter'>

            </div>

        </div>

        <div class="scarf">

            <div class="scarfShadow">

            </div>

            <div class="scarfShadowRight">

            </div>

        </div>

        <div class="scarfEnd">

            <div class="scarfEndShadow">

            </div>

        </div>

    </div>

    <div class="handWrapper">

        <div class="leftHandTopContainer">

            <div class="leftHandTop">

            </div>

        </div>

        <div class="leftHandBottomContainer">

            <div class="leftHandBottom">

            </div>

        </div>

        <div class="rightHandTopContainer">

            <div class="rightHandTop">

            </div>

        </div>

        <div class="rightHandBottomContainer">

            <div class="rightHandBottom">

            </div>

        </div>

    </div>

    <div class='footWrapper'>

        <div class="leftFootTopWrapper">

            <div class="leftFootTop">

            </div>

        </div>

        <div class="leftFootBottomWrapper">

            <div class="leftFootBottom">

            </div>

        </div>

        <div class='toe left'></div>

        <div class="rightFootTopWrapper">

            <div class="rightFootTop">

            </div>

        </div>

        <div class="rightFootBottomWrapper">

            <div class="rightFootBottom">

            </div>

        </div>

        <div class='toe right'></div>

    </div>

</a>

<style>

    body{

        margin: 0;

        padding:0;

        font: 12px Tahoma, arial, sans-serif;

    }

    #mask {

        position: absolute;

        opacity: 0.2;

        top:0;

        left:0;

    }

    header{

        font-family: 'Segoe UI Light','Segoe UI','Microsoft Jhenghei','寰?蒋闆呴粦',sans-serif;

        color: #666;

        font-size: 50px;

        text-align: center;

        margin-top:50px;

    }

    .team {

        font-size: 0.6em;

    }

    .team a{

        color:#5FB7E9;

        text-decoration: none;

    }

    .team a:hover{

        color:#4B9BC9;

    }

    /**

     * LOGO

     */

    #qq {

        width: 420px;

        height: 400px;

        margin: 0 auto;

        margin-top: 30px;

        position: relative;

        display:block;

    }

    .head{

        position: absolute;

        top:18px;

        left: 96px;

        width: 234px;

        height: 185px;

        border: 1px solid #000;

        border-top-left-radius: 117px 117px;

        border-top-right-radius: 117px 117px;

        border-bottom-left-radius: 117px 68px;

        border-bottom-right-radius: 117px 68px;

        z-index:10;

        background: #000;

    }

    .eye{

        width: 44px;

        height: 66px;

        border:1px solid #000;

        border-radius: 50% 50%;

        position: absolute;

        background: #fff;

    }

    .left.eye{

        left:62px;

        top:50px;

    }

    .right.eye{

        left:123px;

        top:50px;

    }

    .innerLeftEye{

        position: absolute;

        top: 20px;

        left: 20px;

        width: 18px;

        height: 24px;

        border-radius: 50%;

        border: 1px solid #000;

        background: #000;

    }

    .innerLeftEye:after{

        content: "";

        position: absolute;

        width: 6px;

        height: 8px;

        background: white;

        z-index: 11;

        top: 6px;

        left: 9px;

        border-radius: 50%;

    }

    .innerRightEye{

        position: absolute;

        width: 18px;

        height: 20px;

        top: 20px;

        left: 8px;

        border-top-left-radius: 50% 90%;

        border-top-right-radius: 50% 90%;

        border-bottom-left-radius: 50% 10%;

        border-bottom-right-radius: 50% 10%;

        background: black;

        box-shadow: 0 -1px 2px black;

    }

    .innerRightEye:after{

        content: "";

        position: absolute;

        width: 10px;

        height: 13px;

        bottom: -1px;

        left: 4px;

        border-top-left-radius: 50% 100%;

        border-top-right-radius: 35% 80%;

        background: white;

    }

    .fix {

        position: absolute;

        width: 4px;

        height: 4px;

        border-radius: 50%;

        background: black;

        top: 17px;

    }

    .fix:after{

        content: "";

        position: absolute;

        width: 4px;

        height: 4px;

        border-radius: 50%;

        background: black;

        top: 0;

        left: 14px;

    }

    .mouthTopContainer {

        position: absolute;

        width: 158px;

        height: 29px;

        z-index: 1;

        top: 120px;

        left: 39px;

        overflow: hidden;

    }

    .mouthTop{

        width: 158px;

        height: 34px;

        position: absolute;

        z-index: 1;

        border:1px solid #FFA600;

        background: #FFA600;

        top: 0;

        left: 0;

        border-top-left-radius: 45% 34px;

        border-top-right-radius: 45% 34px;

        /*background-color: #FFA600; */

    }

    .mouthBottomContainer {

        position: absolute;

        width: 158px;

        height: 15px;

        z-index: 1;

        top: 146px;

        left: 39px;

        overflow: hidden;

    }

    .mouthBottom{

        width: 158px;

        height: 24px;

        position: absolute;

        z-index: 1;

        border:1px solid #FFA600;

        background: #FFA600;

        border-top:none;

        top: -4px;

        left: 0;

        border-bottom-left-radius: 45% 24px;

        border-bottom-right-radius: 45% 24px;

        background-color: #FFA600;

    }

    .lips{

        border: 1px solid #FFA600;

        background: #FFA600;

        width: 116px;

        height: 24px;

        position: absolute;

        top: 146px;

        left: 60px;

        border-top: none;

        border-bottom-left-radius: 50% 100%;

        border-bottom-right-radius: 50% 100%;

    }

    .lipShadow {

        width: 0px;

        height: 0px;

        position: absolute;

        z-index: 2;

        border-top: 20px solid transparent;

        border-bottom: 20px solid transparent;

        border-right: 8px solid black;

        -webkit-transform-origin: top right;

        -webkit-transform: rotate(-60deg);

        -moz-transform-origin: top right;

        -moz-transform: rotate(-60deg);

        -o-transform-origin: top right;

        -o-transform: rotate(-60deg);

        transform-origin: top right;

        transform: rotate(-60deg);

        left: -12px;

        top: 4px;

    }

    .lipShadow.right{

        left:114px;

        -webkit-transform: rotate(60deg) rotateY(180deg);

        -moz-transform: rotate(60deg) rotateY(180deg);

        -o-transform: rotate(60deg) rotateY(180deg);

        transform: rotate(60deg) rotateY(180deg);

    }

    .body{

        width: 326px;

        height: 300px;

        /*border: 1px solid black;*/

        top: 135px;

        left: 48px;

        position: absolute;

    }

    .scarf {

        border: 4px solid #000;

        position: absolute;

        background: #FB0009;

        z-index: 5;

        width: 258px;

        height: 110px;

        top: -2px;

        left: 34px;

        border-top-left-radius: 30px 34px;

        border-top-right-radius: 38px 34px;

        border-bottom-left-radius: 50% 76px;

        border-bottom-right-radius: 50% 76px;

        border-top: none;

    }

    .scarfShadow {

        position: absolute;

        border-top: 6px solid #000;

        width: 60px;

        height: 70px;

        top: 0px;

        left: 6px;

        border-top-left-radius: 90px 120px;

        border-top-right-radius: 30px 30px;

        -webkit-transform: rotate(-79deg);

        -moz-transform: rotate(-79deg);

        -o-transform: rotate(-79deg);

        transform: rotate(-79deg);

    }

    .scarfShadowRight {

        position: absolute;

        border-right: 6px solid black;

        width: 100px;

        height: 70px;

        top: 8px;

        left: 143px;

        border-bottom-right-radius: 70px 70px;

        z-index: 6;

    }

    .scarfEnd{

        position: absolute;

        width: 52px;

        height: 64px;

        z-index: 4;

        top: 90px;

        border: 3px solid black;

        left: 74px;

        border-bottom-left-radius: 50% 43%;

        border-bottom-right-radius: 15px;

        border-top-left-radius: 20% 57%;

        background: #FB0009;

    }

    .scarfEndShadow{

        position: absolute;

        border-top: 6px solid black;

        width: 20px;

        height: 20px;

        top: 6px;

        left: 12px;

        border-top-left-radius: 30px 30px;

        -webkit-transform-origin: top right;

        -moz-transform-origin: top right;

        -o-transform-origin: top right;

        transform-origin: top right;

        z-index: 10;

        -webkit-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);

        -moz-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);

        -o-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);

        transform: skewX(4deg) scaleY(1.5) rotate(-60deg);

    }

    .innerWrapper{

        position: absolute;

        overflow: hidden;

        width: 280px;

        height: 200px;

        left: 30px;

        top: 76px;

    }

    .inner {

        border: 1px solid #000;

        width: 218px;

        position: absolute;

        height: 210px;

        border-radius: 50%;

        left: 25px;

        top: -71px;

        z-index: 4;

        background: #fff;

    }

    .outterWrapper{

        width: 262px;

        left: 32px;

        height: 250px;

        position: absolute;

        top: 54px;

        overflow: hidden;

    }

    .outter{

        border: 1px solid #000;

        width: 260px;

        height: 250px;

        border-radius: 125px;

        position: absolute;

        top: -84px;

        z-index: 3;

        background: #000;

    }

    .handWrapper{

        position: absolute;

        top: 219px;

        left: 7px;

    }

    .leftHandTopContainer{

        width: 118px;

        height: 26px;

        position: absolute;

        z-index: 1;

        top: 55px;

        left: 50px;

        -webkit-transform-origin: bottom left;

        -webkit-transform: rotate(-70deg);

        -moz-transform-origin: bottom left;

        -moz-transform: rotate(-70deg);

        -o-transform-origin: bottom left;

        -o-transform: rotate(-70deg);

        transform-origin: bottom left;

        transform: rotate(-70deg);

        overflow: hidden;

    }

    .leftHandTop{

        width: 128px;

        height: 54px;

        border: 1px solid #050346;

        position: absolute;

        border-top-left-radius: 44% 38px;

        border-top-right-radius: 56% 33px;

        background: #000;

    }

    .leftHandBottomContainer {

        width: 100px;

        height: 30px;

        position: absolute;

        z-index: 1;

        top: 78px;

        left: 50px;

        -webkit-transform-origin: top left;

        -webkit-transform: rotate(-70deg);

        -moz-transform-origin: top left;

        -moz-transform: rotate(-70deg);

        -o-transform-origin: top left;

        -o-transform: rotate(-70deg);

        transform-origin: top left;

        transform: rotate(-70deg);

        overflow: hidden;

    }

    .leftHandBottom{

        width: 128px;

        height: 44px;

        border: 1px solid #050346;

        background: #000;

        border-top: none;

        position: absolute;

        border-bottom-left-radius: 48% 20px;

        border-bottom-right-radius: 52% 23px;

        top: -26px;

    }

    .rightHandTopContainer{

        width: 118px;

        height: 34px;

        position: absolute;

        z-index: 3;

        top: 47px;

        left: 240px;

        -webkit-transform-origin: bottom right;

        -webkit-transform: rotate(65deg);

        -moz-transform-origin: bottom right;

        -moz-transform: rotate(65deg);

        -o-transform-origin: bottom right;

        -o-transform: rotate(65deg);

        transform-origin: bottom right;

        transform: rotate(65deg);

        overflow: hidden;

    }

    .rightHandTop{

        width: 148px;

        height: 54px;

        border: 1px solid #050346;

        position: absolute;

        border-top-right-radius: 41% 54px;

        border-top-left-radius: 59% 48px;

        background: black;

        left: -30px;

        -webkit-transform: rotateY(-180deg);

        -moz-transform: rotateY(-180deg);

        -o-transform: rotateY(-180deg);

        transform: rotateY(-180deg);

    }

    .rightHandBottomContainer{

        width: 110px;

        height: 58px;

        position: absolute;

        z-index: 1;

        top: 81px;

        left: 248px;

        -webkit-transform-origin: top right;

        -webkit-transform: rotate(90deg);

        -moz-transform-origin: top right;

        -moz-transform: rotate(90deg);

        -o-transform-origin: top right;

        -o-transform: rotate(90deg);

        transform-origin: top right;

        transform: rotate(90deg);

        overflow: hidden;

    }

    .rightHandBottom{

        width: 68px;

        height: 28px;

        border: 1px solid #000;

        background: black;

        border-top: none;

        position: absolute;

        top: 1px;

        left: 38px;

        border-bottom-right-radius: 100% 40px;

        z-index: 999;

    }

    .footWrapper{

        position: absolute;

        top: 292px;

        left: 80px;

    }

    .leftFootTopWrapper {

        position: absolute;

        width: 130px;

        top: 16px;

        left: -1px;

        height: 37px;

        overflow: hidden;

        z-index: 2;

    }

    .leftFootTop{

        position: absolute;

        width: 120px;

        height: 60px;

        border: 4px solid black;

        background: #FF9C00;

        border-top-left-radius: 80% 70%;

        top: -10px;

        left: 3px;

    }

    .toe {

        position: absolute;

        border-top: 4px solid black;

        width: 25px;

        height: 20px;

        top: 50px;

        left: 2px;

        border-top-right-radius: 30px 30px;

        border-top-left-radius: 10px 10px;

        -webkit-transform-origin: top left;

        -moz-transform-origin: top left;

        -o-transform-origin: top left;

        transform-origin: top left;

        z-index: 10;

        -webkit-transform: rotate(-45deg);

        -moz-transform: rotate(-45deg);

        -o-transform: rotate(-45deg);

        transform: rotate(-45deg);

    }

    .toe.right{

        -webkit-transform: rotate(45deg) rotateY(180deg);

        -moz-transform: rotate(45deg) rotateY(180deg);

        -o-transform: rotate(45deg) rotateY(180deg);

        transform: rotate(45deg) rotateY(180deg);

        left: 264px;

    }

    .leftFootBottomWrapper {

        position: absolute;

        width: 130px;

        top: 52px;

        left: -1px;

        height: 38px;

        overflow: hidden;

        z-index: 2;

    }

    .leftFootBottom{

        position: absolute;

        width: 120px;

        height: 60px;

        border: 4px solid #000;

        background: #FF9C00;

        border-top-left-radius: 50% 44%;

        border-top-right-radius: 50% 44%;

        border-bottom-left-radius: 50% 56%;

        border-bottom-right-radius: 50% 56%;

        top: -30px;

        left: 3px;

    }

    .rightFootTopWrapper {

        position: absolute;

        width: 134px;

        top: 22px;

        left: 134px;

        height: 36px;

        overflow: hidden;

        z-index: 2;

    }

    .rightFootTop{

        position: absolute;

        width: 120px;

        height: 60px;

        border: 4px solid black;

        background: #FF9C00;

        border-top-right-radius: 32% 65%;

        top: 0px;

        left: 4px;

    }

    .rightFootBottomWrapper {

        position: absolute;

        width: 134px;

        top: 52px;

        left: 134px;

        height: 38px;

        overflow: hidden;

    }

    .rightFootBottom{

        position: absolute;

        width: 120px;

        height: 60px;

        border: 4px solid #000;

        background: #FF9C00;

        border-top-left-radius: 50% 56%;

        border-top-right-radius: 50% 56%;

        border-bottom-left-radius: 50% 44%;

        border-bottom-right-radius: 50% 44%;

        top: -30px;

        left: 3px;

    }

    .rightToe {

        position: absolute;

        width: 40px;

        height: 10px;

        border: 2px solid #000;

        background: #FF9C00;

        border-radius: 50%;

        -webkit-transform-origin: bottom right;

        -webkit-transform: rotate(34deg);

        -moz-transform-origin: bottom right;

        -moz-transform: rotate(34deg);

        -o-transform-origin: bottom right;

        -o-transform: rotate(34deg);

        transform-origin: bottom right;

        transform: rotate(34deg);

        top: 35px;

        left: 210px;

        z-index: 1;

    }

    .copyright{

        margin: 50px 0 0 0;

        height: 50px;

        color: #999;

        font-family: Tahoma;

        font-size: 12px;

        text-align: center;

    }

    .copyright a {

        color: #999;

        text-decoration: none;

    }

    .copyright a:hover, .copyright a:focus {

        outline: none;

        text-decoration: underline;

    }

</style>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!