css3 画三角形
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid #000;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-right:20px solid yellow;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
<div class="arrow-up">
<!--向上的三角-->
</div>
<div class="arrow-down">
<!--向下的三角-->
</div>
<div class="arrow-left">
<!--向左的三角-->
</div>
<div class="arrow-right">
<!--向右的三角-->
</div>
css3 画三角形的更多相关文章
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- css伪元素before/after和画三角形的搭配应用
想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)
1.画三角形 运行结果如下 1.1具体实现步骤 1.1.1首先新建一个project,然后自定义一个view 1.2代码 #import "htingShapeView.h" @ ...
- 菱形实现气泡Bubble,菱形画箭头,菱形画三角形
菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...
随机推荐
- jQuery和CSS的拍摄效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- msys2 使用指定boost
pacman -S mingw-w64-x86_64-toolchain make mingw-w64-x86_64-cmake mingw-w64-x86_64-openssl mingw-w64- ...
- HTTP协议重定向
HTTP重定向:服务器无法处理浏览器发送过来的请求(request),服务器告诉浏览器跳转到可以处理请求的url上.(浏览器会自动访问该URL地址,以至于用户无法分辨是否重定向了.) 重定向的返回码3 ...
- hibernate4整合spring3.1的过程中的异常问题
(1)hibernate4整合spring3.1的过程中,发现了java.lang.NoClassDefFoundError: Lorg/hibernate/cache/CacheProvider异常 ...
- 利用javascript实现二维数组的筛选
背景: 在项目中,我需要对解析后的nc文件数据进行筛选,选出符合要求的点,绘制相应的polygon. 代码:ajax获取某一时刻的数据 var url ="/api/config/PostC ...
- 【Java_多线程并发编程】JUC原子类——4种原子类
根据修改的数据类型,可以将JUC包中的原子操作类可以分为4种,分别是: 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: Atom ...
- PHP获取文件后缀的7中方法
在日常的工作当中我们避免不了要经常获取文件的后缀名,今天我就整理了一下7种获取文件后缀的方法,希望对大家有所帮助. $url = 'http://www.baidu.com/uploads/20185 ...
- Vuex 实际使用中的一点心得 —— 一刷新就没了
问题 在开发中,有一些全局数据,比如用户数据,系统数据等.这些数据很多组件中都会使用,我们当然可以每次使用的时候都去请求,但是出于程序员的"洁癖"."抠"等等优 ...
- cache支持single/increment/increment4三种方式传输
1.cache bypass signle---data length 已知 increment ---data length 不知 用 last data address 结束数据传输 2.cac ...
- checkStyle使用手册
1. Annotations(注解:5个) Annotation Use Style(注解使用风格) 这项检查可以控制要使用的注解的样式. Missing Deprecated(缺少deprecad) ...