CSS 实现上下左右箭头(>)
分类专栏: Css&
简介 本文介绍如何用纯CSS实现上下左右箭头(>)
<p><span class="ql-size-huge">以下是笔画箭头,(空心的)</span></p><p><span class="ql-size-large">HTML 模块</span></p><pre class="ql-syntax" spellcheck="false"><p>Right arrow: <i class="right"></i></p>
<p>Left arrow: <i class="left"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>
</pre><p><br></p><p><br></p><p><span class="ql-size-large">CSS模块</span></p><pre class="ql-syntax" spellcheck="false">i {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</pre><p><br></p><p><br></p><p><span class="ql-size-huge">以下是三角形箭头(实心)</span></p><p><span class="ql-size-large">css模块</span></p><pre class="ql-syntax" spellcheck="false">#triangle-up {
display:inline-block;
width:0;
height:0;
border-left:30px solid transparent;
border-right: 30px solid transparent;
border-bottom:50px solid red;
}
#triangle-down {
display:inline-block;
width:0;
height:0;
border-left:30px solid transparent;
border-right: 30px solid transparent;
border-top:50px solid red;
}
#triangle-left {
display:inline-block;
width:0;
height:0;
border-top: 30px solid transparent;
border-right: 50px solid red;
border-bottom: 30px solid transparent;
}
#triangle-right{
display:inline-block;
width:0;
height:0;
border-top: 30px solid transparent;
border-left: 50px solid red;
border-bottom: 30px solid transparent;
}
</pre>
分享到:
转载:
http://www.webkaka.com/tutorial/html/2019/090451/
喜欢 0
收藏
上一篇:
什么是MVC
暂无评论信息
- 相关文章
- 文章推荐
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
docker搭建jenkins环境执行宿主机的docker无权限的解决方法
初次搭建jenkins持续集成工具的时候,在运行项目阶段出现 permission denied的情况
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据