我们在开发过程中，有很多的方向标签不是图片，而是用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. delphi显示hello world 和退出程序

    Label1.Caption:='hello world!' Form1.close; application.Terminate; //终止程序 Application.Run; //程序运行 te ...

  2. Android NDK开发及调用标准linux动态库.so文件

    源:Android NDK开发及调用标准linux动态库.so文件 预备知识及环境搭建 1.NDK(native development Kit)原生开发工具包,用来快速开发C.C++动态库,并能自动 ...

  3. iOS 获取本地文件的各种坑

    1.无论:TXT,EPUB,PDF等各种格式的文件,保存到本地的时候,最好都保存成字母或者数字,不要保存成汉字,否则,在取文件的时候,由于编码的问题,各种瓦特 2.如果文件名真的保存成了汉字,那么进行 ...

  4. FastJson的用法

    一.简单数据的序列化 pubic class UserInfo implements Serializable{ private String name; private int age; publi ...

  5. Eclipse发布Maven项目到远程服务器

    pom.xml中的配置依赖有两种: 一.tomcat-maven.plugin <plugin> <groupId>org.codehaus.mojo</groupId& ...

  6. R语言实战（五）方差分析与功效分析

    本文对应<R语言实战>第9章:方差分析:第10章:功效分析 ================================================================ ...

  7. bzoj3932

    3932: [CQOI2015]任务查询系统 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1326  Solved: 480[Submit][Sta ...

  8. Python3基础 使用id() 查询变量的存储位置

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  9. 更改pandas dataframe 列的顺序

    摘自 stackoverflow 这是我的df: Net Upper Lower Mid Zsore Answer option More than once a day 0% 0.22% -0.12 ...

  10. FB面经 Prepare: Task Schedule

    tasks has cooldown time, give an input task id array, output finish time input: AABCA A--ABCA output ...