视觉稿中经常有些小三角,如下图。每次用图片做太不方便了,我们看看用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制作小三角的更多相关文章

  1. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  2. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  3. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  6. css实现小三角(原理)

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  7. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  8. css制作倒三角

    布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...

  9. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

随机推荐

  1. POJ 1840 Eps 解题报告(哈希)

    a1x13+ a2x23+ a3x33+ a4x43+ a5x53=0,xi∈[-50,50],且xi!=0.让我们求所有解的可能. 首先,如果暴力判断的话,每个x的取值有100种可能,100^5肯定 ...

  2. POJ 2002 Squares 解题报告(哈希 开放寻址 & 链式)

    经典好题. 题意是要我们找出所有的正方形.1000点,只有枚举咯. 如图,如果我们知道了正方形A,B的坐标,便可以推测出C,D两点的坐标.反之,遍历所有点作为A,B点,看C,D点是否存在.存在的话正方 ...

  3. windows log

    http://technet.microsoft.com/zh-CN/sysinternals http://technet.microsoft.com/en-us/sysinternals/bb89 ...

  4. 打印grid

    void PrintButtonClick(object sender, EventArgs e) { PrintPreviewDialog dlg = new PrintPreviewDialog( ...

  5. 读取编码为utf-16le的文件并打印

    import codecs data = open('test.txt').read()if data[:2] == codecs.BOM_UTF16_LE:    data = data[2:]  ...

  6. [CODEVS3299]有序数组合并求第K大问题

    题目描述 Description 给出两个有序数组A和B(从小到大有序),合并两个有序数组后新数组c也有序,询问c数组中第k大的数 假设不计入输入输出复杂度,你能否给出一个O(logN)的方法? 输入 ...

  7. cocos2d-x 从onEnter、onExit、 引用计数 谈内存泄露问题

    /////////////////////////////////// //author : zhxfl //date   : 2013.8.29 //email  : 291221622@qq.co ...

  8. 【Java基础】Java中的持久属性集Properties

    Properties 类的介绍 Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串.一个属性列表可包含另一个属性列 ...

  9. 选择一个 HTTP 状态码不再是一件难事 – Racksburg

    原文链接:http://racksburg.com/choosing-an-http-status-code/ 打开双语对照阅读 有什么能比 HTTP 响应状态码更简单呢?页面渲染了吗?好极了,返回  ...

  10. 框架技术--S2SH框架整合(spring部分)No 3--声明式事务

    声明式事务:就是讲事务的处理,通过配置进行配置. 几种传播特性  1. PROPAGATION_REQUIRED: 如果存在一个事务,则支持当前事务.如果没有事务则开启(比较常用)  2. PROPA ...