用CSS绘制实体三角形并说明原理

.test{ width:0;height:0;margin:0 auto;border:6px solid transparent;border-top: 6px solid red;}

 

1.采用的是均分原理

盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部分。

2.代码的实现

第一步 保证元素是块级元素

第二步 设置元素的边框

第三步 不需要显示的边框使用透明色

posted @   麋鹿鲁哟  阅读(871)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战

阅读目录(Content)

此页目录为空

网站统计
点击右上角即可分享
微信分享提示