css中书写小三角
我们在开发过程中，有很多的方向标签不是图片，而是用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中书写小三角的更多相关文章
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 【小技巧】只用css实现带小三角的对话框样式
一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...
- 最近Get到的一些HTML/CSS中的小点（一）
1.<em>和<strong>标签都是用来强调一段话中的某几个文字.<em>默认斜体,<strong>默认粗体.在强调语气上<strong> ...
- css直接写出小三角
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...
- 虎扯：纯css3各方向小三角的制作原理分析
入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必 ...
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- css实现小三角（原理）
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
随机推荐
- LPC2478的SPI使用
LPC2478的spi使用 LPC2748具有一个SPI控制器,可以当做SPI主机或者从机使用,有以下特性 其使用起来很方便,并且支持中断,使用的寄存器如下 基本上,使用起来就是设置控制为,CPOL ...
- STM32F10X SPI操作flash MX25L64读写数据（转）
源:STM32F10X SPI操作flash MX25L64读写数据 前一段时间在弄SPI,之前没接触过嵌入式外围应用,就是单片机也只接触过串口通信,且也是在学校的时候了.从离开手机硬件测试岗位后,自 ...
- 两台机子的repcached Memcache 的安装与实验
安装memcached前先要确定系统是否安装了gcc: 1.解压安装包: tar -zxf memcached-1.2.8-repcached-2.2.tar.gz 2.编译: 系统应安装了libev ...
- Valgrind 快速入门
1. 介绍 Valgrind工具组提供了一套调试与分析错误的工具包,能够帮助你的程序工作的更加准确,更加快速.这些工具之中最有名的是Memcheck.它能够识别很多C或者C++程序中内存相关的错误,这 ...
- Java数据结构整理（一）
ava数据结构内容整理关键字: 数据结构 Collection:List.SetMap:HashMap.HashTable如何在它们之间选择一.Array , ArraysJava所有“存储及随机访问 ...
- BZOJ1237: [SCOI2008]配对
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1237 题目大意:你有n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一 ...
- bzoj2120: 数颜色 &&bzoj2453: 维护队列
题目大意: 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有多少.当然,A有时候会依据个人喜好 ...
- css3 翻牌效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- Grunt安装中遇到的问题汇总
Grunt安装中遇到的问题汇总 1.如果是windows下的dos中安装Grunt,必须以管理员身份登录(第一个坑) 登录方法是: 方法一:开始>所有程序>附件>命令提示符上右键&g ...
- iOS 之 static
函数体内的static变量的作用范围是该函数体,在内存中只分配一次,下次调用时仍维持上次的值. 模块内的static全局变量可以被模块内的所有函数访问,但是不能被模块外的其它函数访问. 模块内的sta ...