【前端小技巧】利用border画三角形及梯形

BigTomato 发布于2019-08-30 14:16 / 1210人阅读

摘要：有些透明的背景会与边框重合。总结设置一个边有颜色，设置旁边两条边颜色透明，不设置对边三角形指向无设置边的方向如情况设置一个边有颜色，设置旁边条边颜色透明，其他两条边不设置如情况，是在图的情况之上去掉了上边

border是围绕元素内容和内边距的一条或多条线，border 属性允许你规定元素边框的样式、宽度和颜色

值：
border-width  粗细  none/hidden/solid/dashed/dotted
border-color    颜色  默认颜色是字体颜色
border-style    类型  
可以综合写成：border:width color style

注意点：    
边框是绘制在背景之上，因此。有些透明的背景会与边框重合。

总结：

1.设置一个边border有颜色，设置旁边两条边border颜色透明，不设置对边border,三角形指向无设置边的方向（如6,7情况）
2.设置一个边border有颜色，设置旁边1条边border颜色透明，其他两条边border不设置（如8情况，是在图7的情况之上去掉了上边）

GPU云服务器云服务器画三角形 html画三角箭头销售经验及技巧小三角形

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115897.html

前端特效【第04期】|果汁混合效果-下

摘要：往期回顾在上一期的前端特效里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题先来回顾下咱们的果汁混合效果吧果汁混合效果，扫描下方二维码就看到啦我们接着上期的内容来继续往下讲吧，本期往期回顾在上一期的【前端特效】☜里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题 ...

宋华 2019-08-26 12:22 评论0 收藏0
移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机样式显示效果不一致造成的。五左右宽度自适应第四个小技巧结尾，图中的布局实际上是分左右两块的，依照的需求，文案是要左对齐，数字是要右对齐的。平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Andr...

iOS122 2019-08-29 11:05 评论0 收藏0
移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机样式显示效果不一致造成的。五左右宽度自适应第四个小技巧结尾，图中的布局实际上是分左右两块的，依照的需求，文案是要左对齐，数字是要右对齐的。平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Andr...

lufficc 2019-08-20 10:14 评论0 收藏0
css 实现各种基本图形

摘要：三角形三个角分别是，此时画五角星等价于画三个三角形。所以理论上，通过控制一个三条的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。三角形写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 评论0 收藏0