我们在开发过程中，有很多的方向标签不是图片，而是用css方法书写上去的。

首先我们要了解原理，border的边框的脚步是45度角。

向左方向：

width：0px；

height：0px；

border-top：4px solid transparent；

border-right：4px solid black；

border-bottom：4px solid transparent；

border-left：4px solid transparent；

向右方向：

width：0px；

height：0px；

border-top：4px solid transparent；

border-left：4px solid black；

border-right：4px solid transparent；

border-bottom：4px solid transparent；

剩下的同学们自己发挥吧。

css中书写小三角的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

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

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

  4. 【小技巧】只用css实现带小三角的对话框样式

    一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...

  5. 最近Get到的一些HTML/CSS中的小点（一）

    1.<em>和<strong>标签都是用来强调一段话中的某几个文字.<em>默认斜体,<strong>默认粗体.在强调语气上<strong> ...

  6. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  7. 虎扯：纯css3各方向小三角的制作原理分析

    入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必 ...

  8. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  9. css实现小三角（原理）

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

随机推荐

  1. LoadLibrary失败的原因（转）

    背影: 今天终于把公司的SDK 动态链接库转为Java 可调用的JNI 格式.DLL的编译环境是VS2010,使用Debug 输出时调用正常,而用Release 输出却调用失败.这可把哥搞惨了,开始以 ...

  2. JRPC 轻量级RPC框架

    JRPC是一个轻量级的java RPC框架.它支持服务注册和发现. 目前它开源了,地址为:https://github.com/dinstone/jrpc. Quick Start step 1: g ...

  3. 背景图片等比缩放的写法background-size简写法

    1.背景图片或图标也可像img一样给其宽高就能指定其缩放大小了. 比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是: background:rgba(0, 0, 0, 0) url(&q ...

  4. IOS web app一些实用的属性设置

    IOS对safari私有的属性很多,虽然很多不为人知但是却很实用.掌握好这些属性对web app和混合app的开发会很有帮助. 1.format-detection[telephone=no] 是否自 ...

  5. DOMContentLoaded

    setTimeout(function(){ alert("settimeout"); },0); EventUtil.addHandler(window, "DOMCo ...

  6. 创建iwatch 程序选项

    include complication :包含自定义表盘事件 include glance scene:包含缩略图事件

  7. mysql存储过程中in、out、inout参数使用实际案例

    1.参数in的使用(代表输入,意思说你的参数要传到存过过程的过程里面去)//为了避免存储过程中分号(";")结束语句,我们使用分隔符告诉mysql解释器,该段命令是否已经结束了./ ...

  8. osgEarth学习笔记（转载）

    osgEarth学习笔记1.        通过earth文件创建图层时,可以指定多个影像数据源和多个高程数据源,数据源的顺序决定渲染顺序,在earth文件中处于最前的在渲染时处于最底层渲染:所以如果 ...

  9. ceentos5.5 配置samba服务&用户&组

    准备 Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0  #网络 ...

  10. Linux下的文件目录结构详解

    Linux下的文件目录结构详解 / Linux文件系统的上层根目录 /bin 存放用户可执行的程序 /boot 操作系统启动时所需要的文件 /dev 接口设备文件目录,例如:had表示硬盘 /etc ...