你的位置:首页 > 软件开发 > 网页设计 > css中border制作各种形状

css中border制作各种形状

发布时间:2017-12-05 21:02:00
css利用border制作各种形状的原理如图:使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0:设置border的高度为0:如图最后设置左右border的颜色 ...

css利用border制作各种形状的原理如图:

使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图:

 

css中border制作各种形状

没有了上border如图所示:

css中border制作各种形状

 

 再设置border的宽度为0:

css中border制作各种形状

设置border的高度为0:如图

css中border制作各种形状

最后设置左右border的颜色为透明,如下图:

css中border制作各种形状

贴代码,做个小三角形

<style> .border{  width:0;  height:0;  border-bottom:100px solid red;  border-left:50px solid transparent;  border-right:50px solid transparent; }</style><body>  <div class="border"></div></body>

css中border制作各种形状

 

这个网站可以看到各种样式的border形状

https://css-tricks.com/examples/ShapesOfCSS/

原标题:css中border制作各种形状

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。