杰晶网络

css如何绘制特殊图形的方法示例
网页制作 2024/11/24 佚名
3 2

一、三角形

css如何绘制特殊图形的方法示例

border边框设置

css如何绘制特殊图形的方法示例

代码：

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

效果：

css如何绘制特殊图形的方法示例

代码：

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设置成透明

css如何绘制特殊图形的方法示例

代码：

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、直角三角形

css如何绘制特殊图形的方法示例

代码：先写出个完整的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、梯形

彩带图形：

css如何绘制特殊图形的方法示例

代码：

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;

梯形：

css如何绘制特殊图形的方法示例

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

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、图形：

css如何绘制特殊图形的方法示例

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

.circle{
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-color: orange;
}

5、椭圆

图形：

css如何绘制特殊图形的方法示例

代码：

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

总结：

css如何绘制特殊图形的方法示例

一个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）斜边三角形

图形：

css如何绘制特殊图形的方法示例

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

.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）绘制一条“小尾巴”

图形：

css如何绘制特殊图形的方法示例

代码：

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

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

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

图形：

css如何绘制特殊图形的方法示例

代码：

 

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css,特殊图形
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“css如何绘制特殊图形的方法示例”
暂无“css如何绘制特殊图形的方法示例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网