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 ...
随机推荐
- bzoj1821
题目要求最近的两个部落间距尽可能最远 不难想到一种贪心的方法,对每两个点之间距离从小到大排序, 把每个点看成一个部落 然后不断将距离近的两个部落合并成一个部落,直到剩下了k个部落,那么下一条不同部落之 ...
- 【转】VS2010/MFC编程入门之八（对话框：创建对话框类和添加控件变量）
原文网址:http://www.jizhuomi.com/software/153.html 前两讲中鸡啄米为大家讲解了如何创建对话框资源.创建好对话框资源后要做的就是生成对话框类了.鸡啄米再声明下, ...
- 微支付开发（.net）
最近一周多进行微支付开发工作,总结一下关于微支付开发中遇到的问题. 如写得不对请大家提出,第一次自己写文章.嘿嘿... 1.申请微支付,登陆公众平台后(公众号为服务号并已认证),进入“服务”-“服务中 ...
- Android的string-array数据源简单使用
在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子如下: 把相应的数据放到values文件夹的arrays.xml文件里 <?xml version= ...
- Android PagerAdapter
本基类是ViewPager提供填充页面内容的适配器(数据与显示内容之间桥梁).通常,人们不是直接使用本基类的,而是使用这个基类的实现:FragmentPagerAdapter 或者Fragment ...
- MongoDB之二（增删查改）
一: Insert操作 上一篇也说过,文档是采用“K-V”格式存储的,如果大家对JSON比较熟悉的话,我相信学mongodb是手到擒来,我们知道JSON里面Value 可能是“字符串”,可能是“数组” ...
- selenium2.0 处理各种窗口问题解决方法
selenium2.0处理muti-Windows . Frames .Popup Dialogs selenium2.0处理多窗口,弹窗等,只需要调用WebDriver 嵌套类:TargetLoca ...
- Lua中实现队列（高效方式）
转自http://www.cnblogs.com/stephen-liu74/archive/2012/06/25/2417894.html 在Lua中实现队列的简单方法是使用table库函数inse ...
- 自定义控制器的View(loadView)及其注意点
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Jlink烧写图文教程
,点击安装 , 插上jlink,安装驱动后,红灯一直亮 ...