css怎样绘图独特图型的方式示例

日期:2020-12-12 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

1、3角形

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、等腰3角形:将别的的边的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、直角3角形

编码:先写出个详细的div,再应用border-***-width:0;来截取3角形

border-top-width/border-bottom-width:0=》便是在正中间横着劈开1道,保存上边或下边

border-left-width/border-right-width:0=》便是在正中间竖着劈开1道,保存左侧或右侧

.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%;
}

总结:

1个display:block的元素设置宽高以后主要表现为矩形框。根据设置border-radius能够获得圆角矩形框,圆形和椭圆型。

在应用border-radius时,有几点将会必须留意1下:

  • border-radius,能够各自对4个角开展设置。 比如上图:border-top-left-radius: apx bpx;
  • border-xxx-xxx-radius的两个值各自意味着着椭圆长轴和短轴长度的1半,一般简写的情况下比如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 说明长轴和短轴的长度均为20px,也便是半径为10px的圆形(圆角一部分)。
  • 当应用百分比标值时,a 相对width, b相对height 6、独特图型

(1)斜边3角形

图型:

编码:先画个等边3角形,随后再变换角度

.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(⑴80deg) rotate(⑷4deg)  ;
}

(2)绘图1条“小尾巴”

图型:

编码:

.tail{
    margin: 50px;
    width: 100px;
    height: 70px;
    border-top-right-radius: 70px 70px;
    border-right:6px solid #000000;
}

总结:当对1个角运用圆角款式, 假如这个角邻近的两个boeder1个有界定而1个无界定 ,那末绘图的結果便是有粗到细的“小尾巴了”

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 ⑴px 2px black;
    }

    .innerRightEye:after{
        content: "";
        position: absolute;
        width: 10px;
        height: 13px;
        bottom: ⑴px;
        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: ⑷px;
        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(⑹0deg);
        -moz-transform-origin: top right;
        -moz-transform: rotate(⑹0deg);
        -o-transform-origin: top right;
        -o-transform: rotate(⑹0deg);
        transform-origin: top right;
        transform: rotate(⑹0deg);
        left: ⑴2px;
        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: ⑵px;
        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(⑺9deg);
        -moz-transform: rotate(⑺9deg);
        -o-transform: rotate(⑺9deg);
        transform: rotate(⑺9deg);
    }

    .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(⑹0deg);
        -moz-transform: skewX(4deg) scaleY(1.5) rotate(⑹0deg);
        -o-transform: skewX(4deg) scaleY(1.5) rotate(⑹0deg);
        transform: skewX(4deg) scaleY(1.5) rotate(⑹0deg);

    }

    .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: ⑺1px;
        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: ⑻4px;
        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(⑺0deg);
        -moz-transform-origin: bottom left;
        -moz-transform: rotate(⑺0deg);
        -o-transform-origin: bottom left;
        -o-transform: rotate(⑺0deg);
        transform-origin: bottom left;
        transform: rotate(⑺0deg);
        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(⑺0deg);
        -moz-transform-origin: top left;
        -moz-transform: rotate(⑺0deg);
        -o-transform-origin: top left;
        -o-transform: rotate(⑺0deg);
        transform-origin: top left;
        transform: rotate(⑺0deg);
        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: ⑵6px;
    }


    .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: ⑶0px;
        -webkit-transform: rotateY(⑴80deg);
        -moz-transform: rotateY(⑴80deg);
        -o-transform: rotateY(⑴80deg);
        transform: rotateY(⑴80deg);
    }

    .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: ⑴px;
        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: ⑴0px;
        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(⑷5deg);
        -moz-transform: rotate(⑷5deg);
        -o-transform: rotate(⑷5deg);
        transform: rotate(⑷5deg);
    }

    .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: ⑴px;
        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: ⑶0px;
        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: ⑶0px;
        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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。