我们在开发过程中，有很多的方向标签不是图片，而是用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. iOS tableViewCell plane格式下,接近section边缘不显示分割线却被复用解决办法

    今天做公司产品的时候遇到了如题问题,困扰我很长时间,用尽各种办法不能解决,究其原因不知为何,自定义cell低端有view划线的时候,划线一般的显示1像素,而贴着section的显示很少 顶多0.3像素 ...

  2. iOS 发布流程

    1.登陆苹果开发者中心http://developer.apple.com(99美元账号) 2.进入itunes connect 3.选择Manage Your Apps 4.选择Add New Ap ...

  3. java中集合框架

    java平台提供了一个全新的集合框架."集合框架"主要由一组用来操作对象的接口组成.不同接口描述一组不同数据类型. 在很大程度上,一旦您理解了接口,您就理解了框架.虽然您总要创建接 ...

  4. iOS 错误之 NSObject 、CGFloat

    需要添加 #import <Foundation/Foundation.h> #import <UIKit/UIKit.h>

  5. JavaScript易错点转载

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  6. UWP项目的包无法通过本地校验程序

    在UWP工程中,我们打出的包Appx需要通过本地的校验程序校验通过后才可以进行商店的提交.在校验程序汇报的不通过原因当中,除了显而易见的因为美术资源不规范.代码调用不合法API等原因之外,还有一些奇怪 ...

  7. Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

    ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...

  8. sqlserver怎么将查询出来的数据存到新的数据库表中

    查询结果直接创建一个新表存放select * into [新表名] FROM [原表名]WHERE 车辆='小汽车' 若新建表要放在另一个数据库B中USE BGOSELECT * INTO [新表名] ...

  9. objectc中函数前的加号和减号

    看object-c中的代码里,函数(方法)前总有一个加号或者减号,不知道是什么意思,度娘了一下. http://zhidao.baidu.com/link?url=gw9-JR3bh0i7E_CHbr ...

  10. 分享一些免费的MD5解密网站

    最近下载了几个mdb文件,里面几万条md5和几千条sha512(居然还有站长用512直接放在库中的,尼玛多占空间啊),我用C#写了个工具暴 力了一小部分,大概不到3%吧, 花了我两天,电脑卡得要死,效 ...