<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. Applying vector median filter on RGB image based on matlab

    前言: 最近想看看矢量中值滤波(Vector median filter, VMF)在GRB图像上的滤波效果,意外的是找了一大圈却发现网上没有现成的code,所以通过matab亲自实现了一个,需要学习 ...

  2. linux 系统、命令、软件

    软件名称:Putty 使用方法:http://jingyan.baidu.com/article/e73e26c0eb063324adb6a737.html 需要资料: 服务IP:228.5624.5 ...

  3. Java多线程 3 线程同步

    在之前,已经学习到了线程的创建和状态控制,但是每个线程之间几乎都没有什么太大的联系.可是有的时候,可能存在多个线程多同一个数据进行操作,这样,可能就会引用各种奇怪的问题.现在就来学习多线程对数据访问的 ...

  4. hdu1282回文数猜想

    Problem Description 一个正整数,如果从左向右读(称之为正序数)和从右向左读(称之为倒序数)是一样的,这样的数就叫回文数.任取一个正整数,如果不是回文数,将该数与他的倒序数相加,若其 ...

  5. java中数组的基本知识

    数组{ 物以类聚 人以群分 avg sum 数组 数组的概念[ 数组:一组具有相同数据类型的集合 ] 数组的语法[ 先声明 后使用 声明数组: 数据类型+[]+ 变量名 ;/ 数据类型+变量名 +[] ...

  6. 【Win10】SplitView控件

    SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <Spl ...

  7. C#设置输入框只输入数字

    为输入框添加keyPress事件,然后添加代码: || e.KeyChar > ) && e.KeyChar != && e.KeyChar != &&a ...

  8. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  9. 微信共享收货地址 edit_address:fail 吐白沫级解决方案

    又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... ...

  10. C#string类型总结

    字符串的特性:不可变性,每对字符串做拼接或者重新赋值之类的操作,都会在内存中产生一个新的实例.  所以说,在.Net平台下,如果你对一个字符串进行大量的拼接赋值等操作,会产生大量的垃圾.    --- ...