<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. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. bat基础

    首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 1 ...

  3. 【原】小搞一下 javascript算法

    前言:在前端大全中看到这句话,以此共勉.基础决定你可能达到的高度, 而业务决定了你的最低瓶颈 其实javascript算法在平时的编码中用处不大,不过不妨碍我们学习它,学习一下这些算法的思想,锻炼一下 ...

  4. R 单变量重命名与删除

    单变量重命名 b = rename(b,c(target="flag")) 单变量删除    b = b[,names(b)!='age'] 或者 b[,"age&quo ...

  5. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  6. RabbitMQ安装实践

    背景: 最近一个项目的测试环境需要用到rabbitMQ,但运维和开发都没时间,于是自己试着安装了一发,发现安装很简单,记一笔如下: 安装步骤 查看官网上有不同的安装方法,可使用下载安装包或者直接通过其 ...

  7. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  8. This month Calendar

    package fourth;import java.text.DateFormatSymbols;import java.util.*;public class CalendarTest { pub ...

  9. 关于在Xcode控制台打印的注意点

    注意!!在控制台中打印语句的返回值,这句代码也算是被执行过了一次 比如在下列代码的if语句执行之前,现在控制台打印 [_dataBaseexecuteUpdate:createSql] 的布尔值 if ...

  10. 执行mvn 报错 source-1.5 中不支持 diamond运算符

    编译版本出现了问题 <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> < ...