<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. javascript基本对象

    1 String对象 创建对象 var string1 = new String("Hello"); var string2 = "Hello" //也可以创建 ...

  2. 【mysql】mysql 常用建表语句

    [1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门.[2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primary ...

  3. javascript 数字格式化

    对数字进行格式化输出,是非常有意义的一件事情,例如许多时候,我们希望一个数字能够输出为指定格式的字符串,拿25.9878来说,我们可能会希望它能保留两位小数来说出,即结果为25.99,或者对于0.34 ...

  4. MySQL点滴

    1. 只安装Server和Workbench即可: 2. 安装时安装Windows服务,可以在“管理 > 服务”中开启关闭服务: 3. mysql -uroot -p1234 4. PHP Fa ...

  5. spring统一日志管理，切面（@Aspect），注解式日志管理

    step1 开启切面编程 <!-- 开启切面编程(通过配置织入@Aspectj切面 ) --> <aop:aspectj-autoproxy/> <aop:aspectj ...

  6. 【学习笔记】C语言之词法规则

    一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + =  / . ? ...

  7. 用RMAN备份EBS数据库的脚本

    rman_bak.sh rman target / nocatalog log=/d01/rmanbak/bak_`date +%m%d%H%M`.log<< EOF  run  {  c ...

  8. Swift3.0P1 语法指南——构造器

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  9. JS打开新页面跳转

      有时候使用js进行页面跳转,想使用 a 标签中 target="_blank" 形式,跳转打开一个新的页面. 可以使用以下脚本,创建一个 a标签,然后模拟点击操作. 代码如下: ...

  10. 适配ios9出现的问题：-canOpenURL: failed for URL

    -canOpenURL: failed for URL: "wtloginmqq2://qzapp" - error: "(null)" 2015-09-13 ...