利用border画三角形

  • 一个盒子包括: margin+border+padding+content
  • 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
  • 调整宽度大小可以调节三角形形状.

有颜色的区域是border:

内容为0的时候(width: 0; height: 0;)

so,当其中一边有颜色,其他三边设置为透明(transparent),三角形就出来啦!

but,IE6不支持透明..
不用担心,有招:
IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~
或者,不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的哦

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

参考资料http://caibaojian.com/css-border-triangle.html

posted @   Sameen  阅读(304)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示