纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片。但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>ces</title>
<style>
a{ text-decoration: none; color: #666; }
ul{ list-style: none; }
ul li{ margin-left: 10px; position: relative; }
li::before{
content: "";
border: solid 4px;
border-color: transparent transparent transparent #666;
width: 0px;
height: 0px;
position: absolute;
left: -6px;
top: 6px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">列表列表列表列表列表列表</a></li>
<li><a href="#">列表列表列表列表列表列表</a></li>
<li><a href="#">列表列表列表列表列表列表</a></li>
<li><a href="#">列表列表列表列表列表列表</a></li>
<li><a href="#">列表列表列表列表列表列表</a></li>
<li><a href="#">列表列表列表列表列表列表</a></li>
</ul>
</body>
</html>
效果便如上所示,方框包围的小三角就是。
纯css制作小三角的更多相关文章
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
- 纯css制作带三角(兼容所有浏览器)
如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯CSS实现小圆点和三角形图案
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
随机推荐
- 并发编程之Android中AsyncTask使用详解(四)
更多Android高级架构进阶视频免费学习请点击:[https://space.bilibili.com/474380680] 在Android中我们可以通过Thread+Handler实现多线程通信 ...
- 2018-2-13-win10-edge扩展
title author date CreateTime categories win10 edge扩展 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...
- 基于用户的协同过滤(UserCF)
- Shell while循环详解
while 循环是 Shell 脚本中最简单的一种循环,当条件满足时,while 重复地执行一组语句,当条件不满足时,就退出 while 循环. Shell while 循环的用法如下: while ...
- js 浮点数计算问题
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. //调用:jsAdd(arg1,arg2) //返回值:arg1加上arg2的精确 ...
- leetcood学习笔记-235-二叉搜索树的最近公共祖先
题目描述: 利用二叉搜索树的特点,如果p.q的值都小于root,说明p q 肯定在root的左子树中:如果p q都大于root,说明肯定在root的右子树中,如果一个在左一个在右 则说明此时的root ...
- You believe in fate?
You believe in fate?你相信命运吗?
- Dubbox框架和Zookeeper 依赖的引入
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- hibernate(一对多关系)
代码 public class Main { public static void main(String[] args) { SessionFactory sty = HibernateUtil ...
- Go 程序开发的注意事项
Go 程序开发的注意事项 1) Go 源文件以 "go" 为扩展名. 2) Go 应用程序的执行入口是 main()函数. 这个是和其它编程语言(比如 java/c) ...