欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

css中border制作各种形状

发布时间：2023/12/2 编程问答 39 豆豆
生活随笔 收集整理的这篇文章主要介绍了 css中border制作各种形状 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

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

 

没有了上border如图所示：

 

 再设置border的宽度为0：

设置border的高度为0：如图

最后设置左右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的另一个属性，clip-path.

https://segmentfault.com/a/1190000010936207

附上其中2个比较有用的链接

1.css利用边框做各种样子

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

2.利用clip-path做各种形状，类似svg

http://bennettfeely.com/clippy/






总结

以上是生活随笔为你收集整理的css中border制作各种形状的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。