会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
江湖小角色
github:https://github.com/igitinode 新浪微博:http://weibo.com/Jcc2
博客园
首页
新随笔
新文章
联系
管理
订阅
随笔- 1 文章- 0 评论- 3 阅读 -
13135
[置顶]
经典CSS实现三角形图标原理解析
摘要: 前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解:border边框语法:border四条边框设置border-left设置左边框,一般单独设置左...
阅读全文
posted @ 2015-12-06 22:25 江湖小角色
阅读(13135)
评论(3)
推荐(4)
编辑
公告
昵称:
江湖小角色
园龄:
9年6个月
粉丝:
1
关注:
1
<
2025年2月
>
日
一
二
三
四
五
六
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
搜索
常用链接
我的随笔
我的评论
我的参与
最新评论
我的标签
我的标签
css三角箭头
(1)
css
(1)
border
(1)
三角形
(1)
箭头
(1)
随笔档案
2015年12月(1)
阅读排行榜
1. 经典CSS实现三角形图标原理解析(13135)
评论排行榜
1. 经典CSS实现三角形图标原理解析(3)
推荐排行榜
1. 经典CSS实现三角形图标原理解析(4)
最新评论
1. Re:经典CSS实现三角形图标原理解析
“如果我们我们去掉 border-bottom ,效果相信大家都能猜到,CSS 和 如下图所示”
这个地方应该是去掉border-right.
--忧郁仓鼠
2. Re:经典CSS实现三角形图标原理解析
@ rrenzy可以近似的实现等边三角形,例如上边框和下边框宽度各50px,则向右的三角箭头的高度为100px,为了实现等边三角形,可以横着做一条通过右箭头的直线,通过角尖,改线一定垂直与左边的,此时...
--江湖小角色
3. Re:经典CSS实现三角形图标原理解析
直白易懂,赞啊!有没可能实现等边三角形?
--rrenzy
点击右上角即可分享