站长下载:中国新一代站长门户网!

软件提交最近更新热门排行站长论坛

当前位置:首页 > 站长教程 > 建站经验 > CSS教程 > css如何绘制特殊图形的方法示例

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

时间:2019-01-11人气:474来源:原创我要评论(0)

一、三角形

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>

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

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 抖音独角兽是用什么软件绘制的?_软件教程

    抖音独角兽怎么画?小编相信一定有很多抖音的网友都还不知道吧,看着被人花的这么简单,为什么自己不会呢,下面就跟着小编一起来看看独角兽画法教程吧。画独角兽教程:1、画其实就是很简单,首先大家需要拍一张自己的手的照片,手的姿势就和图中的一样;2、
  • 微信小程序开发canvas绘制坐标图教程

    小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序开发canvas绘制坐标图教程。最新消息,微信小程序开发工具云助手上线,提供云开发功能,开发者无需搭建服务器,便可实现小程序的快速上线和迭代,一站式搭建服务。以往,开发

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号 | 浙公网安备 42011102000245号

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!