使用CSS3制作网站常用的小三角形
现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过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制作网站常用的小三角形的更多相关文章
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- 使用font awesome制作网站常用社交工具联系方式图标
在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: ...
- CSS3——制作人物走路的小动画
一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...
- CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- swiper 、css3制作移动端网站,折叠导航
swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...
- No image!使用border-color属性来制作小三角形
border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-colo ...
- CSSborder制作小三角形
#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
随机推荐
- 拷贝构造函数不能传值,只能传引用,而且一般是传const引用
为什么呢?因为传值函数,需要调用拷贝构造函数,那就层层循环无止境了.
- HTML打开摄像头,进行拍照上传
html代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEn ...
- Codeforces Round #286 (Div. 1) B. Mr. Kitayuta's Technology (强连通分量)
题目地址:http://codeforces.com/contest/506/problem/B 先用强连通判环.然后转化成无向图,找无向图连通块.若一个有n个点的块内有强连通环,那么须要n条边.即正 ...
- 基于对话框的应用程序,点击button打开一个网页
核心:使用Webbrowser控件 加入一个新的对话框,右键 Insert ActiveX control,选中 双击对话框生成响应的类(Web).并为webbrowser绑定成员变量(m_Web) ...
- 归并排序(Python)
一.采用分治策略:将原问题划分成n个规模较小的但结构和原问题相同的子问题,递归解决这些子问题后合并各个结果从而得到原问题的解. 二.分治策略的步骤: 分解:将原问题分解成一系列子问题 解决:子问题粒度 ...
- java大数类,两个不超过20位都不为0的十进制字符串相乘,华为笔试题
import java.math.BigInteger; import java.util.*; import java.io.*; public class Main { public static ...
- bzoj2768: [JLOI2010]冠军调查(双倍经验最小割)
2768: [JLOI2010]冠军调查 题目:传送门 题解: 双倍经验(1934) 代码: #include<cstdio> #include<cstring> #inclu ...
- bzoj1022: [SHOI2008]小约翰的游戏John(博弈SG-nim游戏)
1022: [SHOI2008]小约翰的游戏John 题目:传送门 题目大意: 一道反nim游戏,即给出n堆石子,每次可以取完任意一堆或一堆中的若干个(至少取1),最后一个取的LOSE 题解: 一道 ...
- c语言中类型转换与赋值运算符、算术运算符、关系运算符、逻辑运算符。原码、反码、补码。小解。
类型转换 自动转换 小范围的类型能够自动转换成大范围的类型.short->int->long->float->double 强制类型转换 (类型名)变量或数值 #include ...
- vue 组件之间的传值
父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...