大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何在css中绘制特殊图形?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联是少有的成都网站建设、成都网站设计、营销型企业网站、小程序开发、手机APP,开发、制作、设计、卖链接、推广优化一站式服务网络公司,于2013年成立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评
一、三角形
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案例)
图形:
代码:
看完上述内容,你们掌握如何在css中绘制特殊图形的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!