/*箭头向上*/

.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. luogu愚人节比赛划水记

    先放链接:愚人节比赛 说好的 不毒瘤 呢?题目都太神奇了吧! 管理员的脑洞orz T1 这个可以说是蒙数据蒙出来的,直接输出"0",AC T2 本机房dalao成功发现" ...

  2. 一. python基础知识

    第一章.变量与判断语句 1.第一个python程序 # -*- coding:utf-8 -*- # Author: Raymond print ("hello world") p ...

  3. tableview 删除cell

    正如在以前的帖子说,但是我在转到故事版(StoryBoard)教程之前,我有另外一个问题来回答. 我如何从UITableView删除一行呢? 当人们构建简单的表视图引用程序后,这是另一个常见的​​问题 ...

  4. 高度自适应的bug

    今天在整理之前IFEde作业,发现有个简历的效果好像没实现.于是想把样式改成作业要求的那样. 作业要求是这样的: 右边栏昨晚高度是839px,我想把左边栏做成高度自适应的.但是没成功.现在我把这个问题 ...

  5. 【Java基础】java中的反射机制与动态代理

    一.java中的反射机制 java反射的官方定义:在运行状态下,可以获取任意一个类的所有属性和方法,并且可通过某类任意一对象实例调用该类的所有方法.这种动态获取类的信息及动态调用类中方法的功能称为ja ...

  6. (61)zabbix网络发现规则配置实战/详解

    开始配置.首先,我们需要定义发现规则,用于扫描.步骤如下 第一步 Configuration >>Discovery>>Create rule,编辑网络发现规则 如上配置,za ...

  7. mysqldump指令说明

    3种形式mysqldump [OPTIONS] database [tables]mysqldump [OPTIONS] -B | --databases [OPTIONS] DB1 [DB2 DB3 ...

  8. MySql存储过程的调试

    写和调试存储过程比较好的工具是dbForge studio for mysql 校验其中临时表字段是否符合要求,在存储过程中动态为临时表添加字段约束,或者写个游标,把数据迭代出来,一个个判断.当游标迭 ...

  9. Python9-继承1-day24(大年初一)

    #面向对象编程:'''思想:角色的抽象,创建类,创建角色,面对对象的关键字class 类名: 静态属性 = ‘aaa' def __init__(self):pass 类名.静态属性 ———存储在类的 ...

  10. LeetCode(109) Convert Sorted List to Binary Search Tree

    题目 Given a singly linked list where elements are sorted in ascending order, convert it to a height b ...