css制作小三角
视觉稿中经常有些小三角,如下图。每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦)
<style>
/*border实现三角*/
/*箭头向上*/
.arrow-top{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-bottom: 5px solid red;
}
/*箭头向下*/
.arrow-bottom{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-top: 5px solid red;
}
/*箭头向右*/
.arrow-right{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-left: 5px solid red; }
/*箭头向左*/
.arrow-left{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-right: 5px solid red; }
</style>
来看看整体html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border实现三角</title>
<style>
/*border实现三角*/
/*箭头向上*/
.arrow-top{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-bottom: 5px solid red;
}
/*箭头向下*/
.arrow-bottom{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-top: 5px solid red;
}
/*箭头向右*/
.arrow-right{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-left: 5px solid red; }
/*箭头向左*/
.arrow-left{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-right: 5px solid red; }
</style>
</head>
<body> <div>
<span>店铺信息</span>
<span class="arrow-right" style="display: inline-block;"></span>
<span class="arrow-left" style="display: inline-block;"></span>
<span class="arrow-top" style="display: inline-block;"></span>
<span class="arrow-bottom" style="display: inline-block;"></span>
</div> </body>
</html>
css制作小三角的更多相关文章
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- css制作倒三角
布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...
- CSS生成小三角
前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...
随机推荐
- VI编辑器的使用方法
一.vi的工作模式vi有两种工作模式: 编辑模式:用来输入和编辑文件的模式,屏幕上会显示用户的键入,按键不是被解释为命令执行,而是作为文本写到用户的文件中. 指令模式:用来编辑.存盘和退出文件的模 ...
- 非递归实现先序遍历 java leecode 提交
写完才知道自己学习都是似是而非啊,大家可以也在leecode上提交代码,纯手写,离开eclipse第一种方式:数据结构书上的,使用栈大概思路.1.不断将根节点的左孩子的左孩子直到为空,在这个过程入栈. ...
- HDU 1117 免费馅饼 二维动态规划
思路:a[i][j]表示j秒在i位置的数目,dp[i][j]表示j秒在i位置最大可以收到的数目. 转移方程:d[i][j]=max(dp[i-1][j],dp[i-1][j-1],dp[i-1][j+ ...
- Weka 入门3
这次我们介绍Evaluation类.在上一次中我们只是单纯的预测了分类值,并没有其他评价数据.这场我们使用Evalution类.首先初始化一个Evaluation对象,Evaluation类没有无参的 ...
- 【Java基础】Java中的多态
什么是多态 多态是一个对象的多种实现,是建立在继承的基础上的,即对象“人”,有老师和学生不同的实现,其实总结起来就是允许将子类类型的指针赋值给父类类型的指针. 多态的发生条件 多态发生的前提是:1. ...
- 【Java基础】Java中的代码块
什么是代码块 在Java中,用{}括起来的代码称之为代码块. 代码块分类 局部代码块:在局部变量位置且用{}括起来的代码,用于限制局部变量的生命周期. 构造代码块:在类中的成员变量位置并用{}括起来的 ...
- 最简单的基于FFMPEG的音频编码器(PCM编码为AAC)
http://blog.csdn.net/leixiaohua1020/article/details/25430449 本文介绍一个最简单的基于FFMPEG的音频编码器.该编码器实现了PCM音频采样 ...
- A Tour of Go If
The if statement looks as it does in C or Java, except that the ( ) are gone and the { } are require ...
- oracle flashback
一.Flashback闪回技术概述:当Oracle数据库发生逻辑错误时,必须使用flashback技术,实现快速和方便的恢复数据.对于人为错误,要确定受到错误事务影响的对象或者记录是非常困难的.使用f ...
- 安卓问题http://blog.csdn.net/xb12369/article/details/50510302