css如何绘制特殊图形的方法示例
前端 / 管理员 发布于 7年前 224
- 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、特殊图形
一、三角形
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时，有几点可能需要注意一下：
（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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一条：
纯css实现Material Design中的水滴动画按钮
下一条：
CSS 同级元素浮动分析小结
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
- 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- 近期评论
-
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。.. -
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章.. -
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
