<style>

　　html, body {
　　　　margin: 0;
　　　　padding: 0;
　　}

　　/*下面用CSS3分别实现向上、下、左、右的三角形*/

　　.btn-color{
　　　　color: #622CB9;
　　}

　　/*箭头向上*/

　　.arrow-up {
　　　　width:0;
　　　　height:0;
　　　　border-left:100px solid transparent;
　　　　border-right:100px solid transparent;
　　　　border-bottom:100px solid #089EF1;
　　}

　　/*箭头向右*/

　　.arrow-right {
　　　　width:0;
　　　　height:0;
　　　　border-top:100px solid transparent;
　　　　border-bottom: 100px solid transparent;
　　　　border-left: 100px solid green;
　　}

　　/*箭头向下*/

　　.arrow-down {
　　　　width:0;
　　　　height:0;
　　　　border-left:100px solid transparent;
　　　　border-right:100px solid transparent;
　　　　border-top:100px solid #F8071D;
　　}

　　/*箭头向左*/

　　.arrow-left {
　　　　width:0;
　　　　height:0;
　　　　border-top:100px solid transparent;
　　　　border-bottom:100px solid transparent;
　　　　border-right:100px solid #F804EF;
　　}

　　

　　/*箭头直角左上角*/

　　.r-angle-left-up{
　　　　width:0;
　　　　height:0;
　　　　border-bottom: 200px solid transparent;
　　　　border-left: 200px solid #0F05FC;
　　}

　　/*箭头直角右上角*/

　　.r-angle-right-up{
　　　　width:0;
　　　　height:0;
　　　　border-bottom:200px solid transparent;
　　　　border-right: 200px solid #622CB9;
　　}

　　/*箭头直角右下角*/

　　.r-angle-right-down{
　　　　width:0;
　　　　height:0;
　　　　border-top:200px solid transparent;
　　　　border-right:200px solid #008051;
　　}

　　/*箭头直角左下角*/

　　.r-angle-left-down{
　　　　width:0;
　　　　height:0;
　　　　border-top:200px solid transparent;
　　　　border-left: 200px solid #B35708;
　　}

</style>

<body>

　　<!--等腰三角-->

　　<div class="arrow-up btn-color"><!--向上的三角--></div>

　　<div class="arrow-right btn-color"><!--向右的三角--></div>

　　<div class="arrow-down btn-color"><!--向下的三角--></div>

　　<div class="arrow-left btn-color"><!--向左的三角--></div>

　　<!--直角三角-->

　　<div class="r-angle-left-up btn-color"><!--左上角的直角三角--></div>

　　<div class="r-angle-right-up btn-color"><!--右上角的直角三角--></div>

　　<div class="r-angle-right-down btn-color"><!--右下角的直角三角--></div>

　　<div class="r-angle-left-down btn-color"><!--左下角的直角三角--></div>

</body>

CSS--实现小三角形的更多相关文章

  1. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  2. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  3. 用CSS创建小三角形问题（笔试题常考）

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  4. CSS边框外的小三角形+阴影效果的实现。

    ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效果没有办法给他附带阴影,所以换了一种写法.实现成了这个样子 想要实现 ...

  5. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  6. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  7. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  8. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

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

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

  10. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

随机推荐

  1. spring boot + swagger + mysql + maven

    1.首先编写 yaml 文件,创建项目所需的接口,在swagger.io官网上生成 spring boot项目: 2.由于生成的spring boot项目是公共类的所以还需要修改成所需的项目名称,主要 ...

  2. [Java] Spring + SpringMVC + Maven + JUnit 搭建

    示例项目下载: https://github.com/yangyxd/SpringDemo 利用前面 SpringMVC 项目的配置方式,完成初步的项目创建.下面只讲一些不同之处. 传送门: [Jav ...

  3. JAVA连接SqlServer2008R2和MySql数据库

    问题描述: 下面是有关连接SqlServer2008R2和MySql数据库的封装类 package com.test; import java.sql.Connection; import java. ...

  4. C#：泛型（Generic）

    前言:  此系列都为个人对C#的回顾,属于个人理解,新司机可参考.求老司机指点.如果有什么问题或不同见解,欢迎大家与我沟通! 目录:  泛型是什么 泛型的好处及用途 如何声明使用泛型 泛型类 泛型方法 ...

  5. C# WinForm 技巧：控件截图

    Point screenPoint = 控件.PointToScreen(new Point()); Rectangle rect = new Rectangle(screenPoint, chart ...

  6. EBS 中经常用到的一些值集

    名称                                 值集                                                                ...

  7. centos6.5 mysql-server 5.1.73启动失败

    yum install mysql-server 安装mysql服务端会把相应的客户端也装上 service mysqld start  启动mysql服务 解决办法: 1.chomod 777  / ...

  8. Android Notification通知详解

    根据activity的生命周期,在activity不显示时,会执行onStop函数(比如按下home键),所以你在onStop函数(按退出键除外)里面把notification放在通知栏里,再此显示时 ...

  9. 在Qt Creator 和在 vs2012 里添加信号和槽

    原文地址:http://www.cnblogs.com/li-peng/p/3644812.html 作者:李鹏 出处:http://www.cnblogs.com/li-peng/ 本文版权归作者和 ...

  10. 【河北省队互测】 gcd BZOJ 2818

    Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的 数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sa ...