用css伪类制作三角形的三种方法
在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧!
第一种:一个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伪类制作三角形的三种方法的更多相关文章
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- NGUI制作字体的三种方法
主要参考两篇博文: (1).NGUI制作字体的三种方法 (2).使用位图字体工具BMFont从图片生成自定义字体 1.BMFont下载地址 http://www.angelcode.com/produ ...
- 使用before、after伪类制作三角形
使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head> ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- 用CSS伪类制作一个不断旋转的八卦图?
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- css伪类制作三角箭头
<meta charset="utf-8"> <style type="text/css"> .tip{ padding: 5px 10 ...
- 有关css伪类visited样式无效的解决方法
错误写法 将visited写在hover和active之后,例如: .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color: ...
- css不定高图文垂直居中的三种方法
html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- FLAG_ACTIVITY_CLEAR_TOP
看了一篇相关的文章,感觉还不错,链接http://www.cnblogs.com/lwbqqyumidi/p/3775479.html
- 在MyBook Live上部署svn
一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. 一.部署svn 1.分别执行以下2条命 ...
- GitHub 上排名前 100 的 Objective-C 项目简介
主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 项目名称 项目信息 1. AFNetworking ...
- Java class file format specfication
Java class file format spec Link: https://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html Her ...
- NOIP模拟赛-征兵
一个国王,他拥有一个国家.最近他因为国库里钱太多了,要征集一只部队要保卫国家.他选定了N个女兵和M个男兵,但事实上每征集一个兵他就要花10000RMB,即使国库里钱再多也伤不起啊.他发现,某男兵和某女 ...
- Web后台技术趋势
今天使用Google Trend比较了一下服务器端的程序开发语言技术ASP/ASP.NET Core, PHP, Node.Js的变化趋势,发现一下特点. ASP.NET最近几年一直再下降. ASP和 ...
- 关于C#的委托(delegate)的自我理解
首先描述一个事情,一个老师饿了,他要去买东西填饱肚子,然后他发现他的学生“小李”在玩,没学习,于是就委托“小李”去帮他买吃的. 根据这件事我们来分析: 首先得有个老师(老师饿了是他的方法,老师买东西也 ...
- C# 时间函数相减
1:第一种方式: "; "; DateTime firstDateTemp = DateTime.ParseExact(firsttime, "yyyyMMddHHmms ...
- VMWare MAC系统调整磁盘
VMware,打开虚拟文件,调整磁盘大小. 从40G调整到80G 进入虚拟机,打开终端 diskutil list;diskutil resizeVolume disk0s2 80GB http:// ...
- Android之使用Android-query框架进行开发(一)(转载)
开发Android使用Android-query框架能够快速的,比传统开发android所要编写的代码要少得很多,容易阅读等优势. 下载文档及其例子和包的地址:http://code.google.c ...