[璃猫]

璃猫博客

limao.pro

纯css样式border元素绘制三角形

Aurora

February 9, 2021

访问: 46 次

0 Comments

36字数

#

CSS 样式表

首页 / CSS 样式表正文

纯css绘制三角形

代码

写法一、
#triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
写法二、
#triangle{
    width: 0;
    height: 0;
    border:30px solid #333;
    border-color:blue transparent transparent transparent;
}
注释:
transparent         //透明

优化IE6以下版本浏览器

添加:
border-style:solid dashed dashed dashed;

三角形制作完成!

本文为原创知识文章,版权归 璃猫博客 所有,转载请注明出处!

本文链接: https://www.limao.pro/archives/052.html

友情提示:如果博客部分链接出现404,请留言或者 联系博主 修复。

最后修改时间:February 9, 2021

© 本文允许规范转载

嗨!猫客,不妨给 5秒 时间,赞赏一下本博客吧!( 其实本博主在按钮里藏了支付宝红包哦~ )

上一篇
下一篇

发布你的观点趴i

评论 ( 请使用真实邮箱地址,以便接收评论回复信息 )

选择表情

还没有小可爱发布评论呢~ o(╥﹏╥)o

下面没有内容啦!(°Д°) 太长啦~我快被撑爆啦!o(╥﹏╥)o

热门文章
TYPECHO恋爱主题 - 往后余生 November 29, 2020
CSS样式表 November 26, 2020
JAVA环境安装与编程软件Eplices安装教程 November 23, 2020

站内活动 时间一般均为 7天 时间

欢迎各位猫客,本站运营初期,不足之处欢迎大家指点。(灬°ω°灬)

博客资料
  • 文章数目

    70

  • 评论数目

    9

  • 站内页面

    3

  • 运行天数

    0年202天

广而告之
我在等你呢~
[享受生活 做最酷的自己]
[头像]

Aurora

环游是无趣,至少可以陪着你~

×
SUPPORT