上三角▲
 
 
1 width: 0;
2 height: 0;
3 line-height: 0;
4 font-size: 0;
5 border-width: 10px;
6 border-style: solid;
7 border-color: transparent transparent #000 transparent;
 
 
下三角▼
 
 
1 width: 0;
2 height: 0;
3 line-height: 0;
4 font-size: 0;
5 border-width: 10px;
6 border-style: solid;
7 border-color: #000 transparent transparent transparent;
 
 
左三角
 
 
1 width: 0;
2 height: 0;
3 line-height: 0;
4 font-size: 0;
5 border-width: 10px;
6 border-style: dashed solid dashed dashed;
7 border-color: transparent #000 transparent transparent;
 
 
右三角
 
 
1 width: 0;
2 height: 0;
3 line-height: 0;
4 font-size: 0;
5 border-width: 10px;
6 border-style: dashed dashed dashed solid;
7 border-color: transparent transparent transparent #000 ;
 
 
三角若需要定位自己添加position
 
三角的大小更改border-width,颜色更改border-color中的颜色值。

小三角图标如何用CSS写的更多相关文章

  1. EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序

    说明一下: 当点击 datagrid 表头某一列的小三角图标时,easyui 本身是有排序的,但是在当我们对 datagrid 进行了分页的情况下,点击排序只是对当前页的数据进行排序,而需求需要我对数 ...

  2. 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  3. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢?

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  4. 如何用css写打印样式

    打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...

  5. 微信小程序相关三、css写小黄人

    小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人 都是用的css,基 ...

  6. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  7. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  8. 纯CSS写的各种小三角和小箭头

    头朝下的小三角 width:0; height:0; border:50px solid transparent; //所有border都是透明的, border-top-color:black; / ...

  9. select自定义小三角样式

    这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class ...

随机推荐

  1. CodeForces 86D(Yandex.Algorithm 2011 Round 2)

    思路:莫队算法,离线操作,将所有询问的左端点进行分块(分成sqrt(n) 块每块sqrt(n)个),用左端点的块号进行排序小的在前,块号相等的,右端点小的在前面. 这样要是两个相邻的查询在同一块内左端 ...

  2. Sticks(poj1011/uva307)

    题目大意: 乔治有一些碎木棒,是通过将一些相等长度的原始木棒折断得到的,给出碎木棒的总数和各自的长度,求最小的可能的原始木棒的长度:(就是将一些正整数分组,每组加起来和相等,使和尽可能小) 一开始做p ...

  3. php 判断是否 是手机访问

    //判断是否属手机 function is_mobile() { $user_agent = $_SERVER['HTTP_USER_AGENT']; $mobile_agents = Array(& ...

  4. This absolute uri http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application

    部署生产环境出现以上错误,原因是jsp页面中使用了jstl的标签,但没有导入相应的jar包.因为开发环境 myeclipse10 自带类库已经集成 解决方法 ①将jstl.jar和standard.j ...

  5. Hadoop中常用的InputFormat、OutputFormat(转)

    Hadoop中的Map Reduce框架依赖InputFormat提供数据,依赖OutputFormat输出数据,每一个Map Reduce程序都离不开它们.Hadoop提供了一系列InputForm ...

  6. Ogre中TerrainSceneManager

    转自:http://blog.csdn.net/yanonsoftware/article/details/1103665 TerrainSceneManager是一个OctreeSceneManag ...

  7. LNA和PA

    低噪声放大器(Low Noise Amplifier) -------------LNA 功率放大器(Power Amplifier)---------------------PA LNA是低噪声放大 ...

  8. AppCan相关网站

    AppCan文档中心: http://doc.appcan.cn/#!/guide/handbook AppCan官网: http://www.appcan.cn/index.html

  9. 2016 - 1 - 22 HTTP(一)

    一:通过URL找到服务器   1. URL的概念: 1.1 URL全称Uniform Resource Locatior 统一资源定位符 1.2 通过一个URL就可以找到互联网上的唯一的资源. 1.3 ...

  10. Linux内核中关于内存的数据结构

    物理页面 /* * Try to keep the most commonly accessed fields in single cache lines * here (16 bytes or gr ...