一、三角形
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
css,特殊图形
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]