视觉稿中经常有些小三角,如下图。每次用图片做太不方便了,我们看看用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. 【HDOJ】1709 The Balance

    母函数,指数可以为1也可以为-1,扩大指数加消减发现TLE,于是采用绝对值就过了. #include <stdio.h> #include <string.h> #define ...

  2. -_-#【Cookie】使用无 cookies 的域

    cookie-free域名提高网页效率

  3. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

  4. jquery 创建 SVG DOM 的处理方法

    使用的是 createElement 方法 这个是无法生成SVG DOM的 可以使用下方的方法生成 var svgns = "http://www.w3.org/2000/svg" ...

  5. 终极秘籍教你怎么找回被盗iPhone 查询ICCID

    iPhone不慎丢失后怎么办?普通青年:立刻报警,基本没用.文艺青年:用Find my iPhone查找位置.但那只是个大概位置,iPhone关机后更是没戏,接着是用iCloud锁定手机,发送警告信息 ...

  6. c#中字符串截取使用的方法

    AndyZhang welcome to java world c#中字符串截取使用的方法 String substring(int beginIndex) String substring(int ...

  7. SSO单点登录解决方案[转载]

    1 什么是单点登陆      单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互 ...

  8. sql server 修改表的默认值, 需要先删除约束条件

    ---------增加是否发布订单 if not exists(select 1 from syscolumns where name='iIsRelease' and id=OBJECT_ID('M ...

  9. LoadRunner 你不知道的事之——内存使用

    LoadRunner的使用相信大家很熟悉,但是可能很少有人去关注一个Vuser 在以线程模式和进程模式下的内存开销情况,下面通过个人的试验得出一组数据供大家参考,只有你真正了解了,才能做的更深入. 测 ...

  10. bzoj 1875 [SDOI2009]HH去散步(矩乘)

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因 ...