现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过css3实现的小三角效果。

先上html代码:

<div class="arrow-up">
<!--向上的三角-->
</div>
<div class="arrow-right">
<!--向右的三角-->
</div>
<div class="arrow-down">
<!--向下的三角-->
</div>
<div class="arrow-left">
<!--向左的三角-->
</div>

我使用了四个div分别展示上下左右四个方向的箭头,下面是css代码:

/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #f00;
} /*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
} /*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-top:40px solid #ccc;
} /*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid #00f;
}

这样出来的效果就是这样:

颜色和大小当然可以随意控制,这样以后我们就不需要切图了,直接使用css会更简单。

使用CSS3制作网站常用的小三角形的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. 使用font awesome制作网站常用社交工具联系方式图标

    在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: ...

  3. CSS3——制作人物走路的小动画

    一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...

  4. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  5. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  6. swiper 、css3制作移动端网站,折叠导航

    swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...

  7. No image!使用border-color属性来制作小三角形

    border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-colo ...

  8. CSSborder制作小三角形

    #cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...

  9. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

随机推荐

  1. Java IO(三) 之 FileInputStream

    前言: 对于文件系统中的文件.都能够使用FileInputStream流类以二进制的形式进行读取.可是因为Java本身的定位在JVM之上,没有处理计算机底层的能力.因此一些涉及底层处理的方法都是使用n ...

  2. 拷贝构造函数不能传值,只能传引用,而且一般是传const引用

    为什么呢?因为传值函数,需要调用拷贝构造函数,那就层层循环无止境了.

  3. 国家人工智能(AI)的美好前景

    在今年两会期间.李彦宏(Robin Lee,1968-)关于人工智能(AI)"国家优先"的提案,即所谓的"中国大脑"计划.依据何在?为什么? 近几年,世界互联网 ...

  4. Objective-C基础笔记(3)OC的内存管理

    Objective-C的内存基本管理 在OC中每一个变量都保存着引用计数器,当这个对象的引用计数器为0的时候该对象会被回收.当使用alloc.new或者copy创建一个对象的时候,对象的引用计数器被置 ...

  5. C++模板中的静态

    #include <iostream> #include <stdlib.h> using namespace std; template<class T> cla ...

  6. leetcode题解||ZigZag Conversion问题

    problem: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of r ...

  7. SSH公钥认证

    一.实验的目的 了解密钥对的创建和使用,掌握免password远程登录和远程操作 二.实验环境 本地主机 rh1: 192.168.233.3/24 远程主机 rh2: 192.168.233.4/2 ...

  8. (OpenGL ES 2.0 Shading Language) attribute 、uniform 和 varying

    一:attribute .uniform 和 varying 都是glsl的变量的内存指示器(storage qualifiers),指明变量的内存特性 二:attribute attribute 是 ...

  9. zzulioj--1790-- 弹珠游戏(数学水题!)

    弹珠游戏 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 14  Solved: 10 SubmitStatusWeb Board Descriptio ...

  10. Linux换行符相关

    Linux和windows中的换行符差异问题LINUX的换行符在Windows记事本打开不换行或出现黑点是由于Linux和windows中的换行符差异问题造成的. Unix系统里,每行结尾只有“< ...