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

于 2021-08-03 19:23:56 发布
阅读量629 收藏 1
点赞数 1
文章标签： css一些特殊的图形

一、三角形

08c44bfcfc2196388a9f781a4c5f9410.png

border边框设置

b0d1a58d16303dac4069672cc499e39b.png

代码：

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

效果：

a8a5b43622944933cc4ce143e32ed3bf.png

代码：

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

0846f1367798e4088632cbaf82ad838b.png

代码：

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

c61ec69ad01e0c56a0a8333639eec306.png

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

彩带图形：

d06efe1be7d0a178370c51efc87dbca3.png

代码：

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;

梯形：

915d812dc06195d814d74a53dd2c6a64.png

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

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

1001314f2b58c8b14721640bb561c9d1.png

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

.circle{

width: 100px;

height: 100px;

border: 0;

border-radius: 50%;

background-color: orange;

}

5、椭圆

图形：

10ca0e5f969a8134a154fb94afdafc60.png

代码：

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

}

总结：

bd05a9adeb171121e5c4007544cd6f09.png

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

图形：

6276d25db59229df6c112a688a2bc4a2.png

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

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

图形：

4a0f343676d4ac8e223f6311417b2082.png

代码：

.tail{

margin: 50px;

width: 100px;

height: 70px;

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

border-right:6px solid #000000;

}

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

7、绘制QQ图案(取自AlloyTeam案例)

图形：

33bea2e73b658b16b63c8dc31bf131db.png

代码：

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;

}

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

贴娘饭
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值