<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. css随笔1

    1.简单清除浏览器样式 *{        padding: 0px;        margin: 0px;    } 2.得到屏幕范围的div html,body{        width: 1 ...

  2. excellent cushioning and also vitality go back with this boot

    The particular manufactured fine mesh higher almost addresses the complete boot. Here is the sort of ...

  3. p/invoke碎片，对结构体的处理

    结构体的一些相关知识 可直接转换类类型,比如int类型,在托管代码和非托管代码中占据内存大小 和意义都是一个样的. 结构体封送的关键是:在托管代码和非托管代码中定义的一致性.什么是定义的一致性?包括结 ...

  4. path操作

    1. 通过当前目录获取想要的目录,采用relative函数,例如: function test(){ var xx= path.relative('/', '../../'); console.log ...

  5. SpringMVC学习记录5

    Springmvc流程中的扩展点有很多,可以在很多地方插入自己的代码逻辑达到控制流程的目的. 如果要对Controller的handler方法做统一的处理.我想应该会有很多选择,比如:@ModelAt ...

  6. github免密码设置

    在创建好了github账号之后,我们可以新建自己的github项目.然而,我们在本地代码升级维护的过程中,涉及到git操作的时候并不是想每次都重新输入密码.这个时候我们需要使用ssh和私钥(公钥)来方 ...

  7. Java Web ——http协议响应报文

    HTTP 响应报文 HTTP 响应报文由状态行.响应头部.空行 和 响应包体 4 个部分组成,如下图所示: 下面对响应报文格式进行简单的分析: 状态行:状态行由 HTTP 协议版本字段.状态码和状态码 ...

  8. document封装一些常用的方法

    /** * 批量修改元素样式 */ function css(domObj,styleArry){ for(var i=0;i<styleArry.length;i++){ domObj.sty ...

  9. Python自动化之模板继承和cookie

    request请求头信息 type(request) //查看类 from django.core.handlers.wsgi import WSGIRequest 结果会以字典的形式存在 reque ...

  10. MVC中使用Entity Framework 基于方法的查询学习笔记 （二）

    解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...