/*箭头向上*/

.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 画三角形的更多相关文章

  1. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  2. CSS3画三角形原理

    1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  5. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  6. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  7. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  8. iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)

    1.画三角形  运行结果如下 1.1具体实现步骤 1.1.1首先新建一个project,然后自定义一个view 1.2代码 #import "htingShapeView.h" @ ...

  9. 菱形实现气泡Bubble,菱形画箭头,菱形画三角形

    菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...

随机推荐

  1. Spring对注解(Annotation)处理【转】

    1.从Spring2.0以后的版本中,spring也引入了基于注解(Annotation)方式的配置,注解(Annotation)是JDK1.5中引入的一个新特性,用于简化Bean的配置,某些场合可以 ...

  2. Java产生GUID

    /** * 产生GUID */public static final String generateGUID(){ UUID uuid = UUID.randomUUID(); return uuid ...

  3. MySQL插入SQL语句后在phpmyadmin中注释显示乱码

    自己写一个建一个简单的数据表,中间加了个注释,但是用PHPmyadmin打开后发现注释不对. 就先查询了一下sql 语句 发现SQL 语句并没有问题,感觉像是显示编码的问题,就先用set names ...

  4. HDU-1009-肥鼠交易

    这题是一道简单的可拆分的贪心题目,需要注意的是,我们定义的结构体里面都应该用double类型, 或者float类型,不然两个int相除,就失去了精度(强转也可以). #include <cstd ...

  5. 转载:jquery.ajax之beforeSend方法使用介绍

    常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据.这个就可以用beforeSend方法来实现. 下载demo:a ...

  6. 力扣题目汇总(重复N次元素,反转字符串,斐波那契数)

    重复 N 次的元素 1.题目描述 在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3] 输出:3 ...

  7. invalid LOC header (bad signature)

    [产生原因] 本地maven仓库相关jar存在问题. [解决方案] 删除本地maven相关jar并重新下载.

  8. Java-终止应用程序

    参考了:http://www.cnblogs.com/xwdreamer/archive/2011/01/07/2297045.html 理论在上面链接中有详细的解释 package com.tj; ...

  9. luogu2051 [AHOI2009]中国象棋

    巨水,调了好久,心态爆炸 #include <iostream> #include <cstring> #include <cstdio> using namesp ...

  10. Python3常用模块的安装

    1.mysql驱动:mysql-connector-python 1.安装 $ pip3 install mysql-connector-python --allow-external mysql-c ...