在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧!

第一种:一个90度的“ > ”,  只有线条。(可以做下拉框的箭头之类的) 例如: 

.next:after
{
content: "";
width: 6px;
height: 6px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
position: absolute;
right: 9px;
top: 20px;
}

第二种:带颜色的。例如:

.next:after
{

position: absolute;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
content: " ";
display: block;
width: 0;
height: 0;
top: -8px;
left: 20px;

}

第三种:线条+颜色。原理,用两个不同颜色的伪类重叠。

例如:

.pos_rel {
position: relative;
_line-height: 0;
}

.pos_rel .icon1 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #1c7ecf transparent transparent;
border-style: solid;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}

.pos_rel .icon2 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
position: absolute;
left: 4px;
top: -9px;
width: 0;
height: 0;
}

用css伪类制作三角形的三种方法的更多相关文章

  1. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. NGUI制作字体的三种方法

    主要参考两篇博文: (1).NGUI制作字体的三种方法 (2).使用位图字体工具BMFont从图片生成自定义字体 1.BMFont下载地址 http://www.angelcode.com/produ ...

  3. 使用before、after伪类制作三角形

    使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head>    ...

  4. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  5. 用CSS伪类制作一个不断旋转的八卦图?

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  6. css伪类制作三角箭头

    <meta charset="utf-8"> <style type="text/css"> .tip{ padding: 5px 10 ...

  7. 有关css伪类visited样式无效的解决方法

    错误写法 将visited写在hover和active之后,例如: .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color: ...

  8. css不定高图文垂直居中的三种方法

    html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...

  9. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

随机推荐

  1. FLAG_ACTIVITY_CLEAR_TOP

    看了一篇相关的文章,感觉还不错,链接http://www.cnblogs.com/lwbqqyumidi/p/3775479.html

  2. 在MyBook Live上部署svn

    一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. 一.部署svn 1.分别执行以下2条命 ...

  3. GitHub 上排名前 100 的 Objective-C 项目简介

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况.   项目名称 项目信息 1. AFNetworking ...

  4. Java class file format specfication

    Java class file format spec Link: https://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html Her ...

  5. NOIP模拟赛-征兵

    一个国王,他拥有一个国家.最近他因为国库里钱太多了,要征集一只部队要保卫国家.他选定了N个女兵和M个男兵,但事实上每征集一个兵他就要花10000RMB,即使国库里钱再多也伤不起啊.他发现,某男兵和某女 ...

  6. Web后台技术趋势

    今天使用Google Trend比较了一下服务器端的程序开发语言技术ASP/ASP.NET Core, PHP, Node.Js的变化趋势,发现一下特点. ASP.NET最近几年一直再下降. ASP和 ...

  7. 关于C#的委托(delegate)的自我理解

    首先描述一个事情,一个老师饿了,他要去买东西填饱肚子,然后他发现他的学生“小李”在玩,没学习,于是就委托“小李”去帮他买吃的. 根据这件事我们来分析: 首先得有个老师(老师饿了是他的方法,老师买东西也 ...

  8. C# 时间函数相减

    1:第一种方式: "; "; DateTime firstDateTemp = DateTime.ParseExact(firsttime, "yyyyMMddHHmms ...

  9. VMWare MAC系统调整磁盘

    VMware,打开虚拟文件,调整磁盘大小. 从40G调整到80G 进入虚拟机,打开终端 diskutil list;diskutil resizeVolume disk0s2 80GB http:// ...

  10. Android之使用Android-query框架进行开发(一)(转载)

    开发Android使用Android-query框架能够快速的,比传统开发android所要编写的代码要少得很多,容易阅读等优势. 下载文档及其例子和包的地址:http://code.google.c ...