<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #triangle-up {

                width: 0;

                height: 0;

                border-left: 50px solid red;

                border-right: 50px solid yellow;

                border-bottom: 50px solid greenyellow;

                border-top: 50px solid #0F9AE0;     /*加 transparent 属性可以使相应的边框隐藏*/

            }

        </style>

    </head>

    <body>

        <div id="triangle-up"></div>

    </body>

</html>

效果图如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUkAAADfCAIAAAD0oLYVAAAFeElEQVR4nO3WwY0cNxRF0cnAW9lJKBM7FdkJaCnYysA5KBUtR1tnMt4ZhjTTXVVNFl+/Pgc/AALkBf/TC9DoafUBgCm0DZ20DZ20DZ20DZ20DZ20DZ2+b/vTr7//9Pc/5ur8+fXDkguDjX74t5+e5H11Pn/9YOUh3Ctty3tb2Nom2utty3tD2Nom2ptty/ta2Nom2qW25X0xbG0T7Urb8n47bG0T7Xrb8n4jbG0TbVPbj5z322Frm2hb237MvC+GrW2i7Wj70fK+Fra2ibav7cfJe0PY2iba7rYfIe9tYWubaEfa7s57c9jaJtrBtlvz3hO2tol2vO2+vHeGrW2i3dR2U977w9Y20W5tuyPvQ2Frm2gD2r73vI+GrW2ijWn7fvO+IWxtE21Y2/eY921ha5toI9u+r7xvDlvbRBvc9r3kPSJsbRNtfNv5eQ8KW9tEm9J2ct7jwtY20Wa1nZn30LC1TbSJbaflPTpsbRNtbts5eU8IW9tEm952Qt5zwtY20c5oe23e08LWNtFOantV3jPD1jbRzmv7/Lwnh61top3a9pl5zw9b20Q7u+1z8j4lbG0TbUHbs/M+K2xtE21N2/PyPjFsbRNtWdsz8j43bG0TbWXbY/M+PWxtE21x26PyXhG2tom2vu3b814UtraJFtH2LXmvC1vbREtp+1jeS8PWNtGC2t6b9+qwtU20rLa35x0QtraJFtf2lrwzwtY20RLbvpx3TNjaJlpo22/lnRS2tomW2/aPeYeFrW2iRbf9/7zzwtY20dLbfnl6+vTbH38lhq1tot1B298+vnt++Xl1xtrmzqS3/e3juy8v77+8vH9++WV1ydrmnkS3/V/YqXlDrty2vws7Mm/IFdr2q2Hn5Q25Etu+EHZY3pArru2rYSflDbmy2t4YdkzekCuo7V1hZ+QNuVLaPhB2QN6QK6Ltw2GvzhtyrW/7xrCX5g25Frc9JOx1eUOulW0PDHtR3pBrWdvDw16RN+Ra0/aksE/PG3ItaHtq2OfmDbnObvuEsE/MG3Kd2vZpYZ+VN+Q6r+2Twz4lb8h1UttLwp6fN+Q6o+2FYU/OG3JNb3t52DPzhlxz2w4Je1rekGti21Fhz8kbcs1qOzDsCXlDriltx4Y9Om/INb7t8LCH5g25Brd9F2GPyxtyjWz7jsIelDfkGtb23YU9Im/INabtOw375rwh14C27zrs2/KGXLe2XRD2DXlDrpvargn7aN6Q63jbZWEfyhtyHWy7Muz9eUOuI20Xh70zb8i1u+36sPfkDbn2tf0gYW/OG3LtaPuhwt6WN+Ta2vYDhr0hb8i1qe2HDfta3pDretsPHvbFvCHXlbaFfTFvyHWpbWFfyxtyvdm2sDfkDbleb/tZ2JvyhlyvtC3szXlDru8fqFV8T96Qy+cDnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnf4Fed8q0KqSeY0AAAAASUVORK5CYII=" alt="" />

css绘制三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  3. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  4. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  5. CSS绘制三角形和箭头

    <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...

  6. 用CSS绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

  7. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  8. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  9. 纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  10. 纯CSS绘制三角形（各种角度）类似于使用字符画法，根据位移不同，也可以使用两个元素画出三角边框

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. TIdHTTPServer制作REST中间件

    TIdHTTPServer制作REST中间件 使用DELPHI7+INDY9开发 // 陈新光 2017-2-21// LIS数据同步服务器// 浏览器输入:http://127.0.0.1:8000 ...

  2. chm 转 pdf 工具推荐与对比

    在进行推荐chm转pdf的软件之前,首先来了解一下为什么我们要将chm转为pdf. CHM是英语“Compiled Help Manual”的简写,即“已编译的帮助文件”.CHM是微软新一代的帮助文件 ...

  3. C中的继承和多态

    昨天同学面试被问到这个问题,很有水平,以前都没有遇到过这个问题,一时自己也不知道怎么回答. 网上学习了一下,记录以备后用! C/C++ Internals : 里面的问题都写的不错,可以读读! Ref ...

  4. 蜗牛—Android基础之button监听器

    XML文件中有一个textView 和 一个button. <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...

  5. Nginx 第三方模块的安装以及一致性哈希算法的使用

    Nginx 第三方模块的安装以及一致性哈希算法的使用 第三方模块安装方法总结: 以ngx_http_php_memcache_standard_balancer-master为例 1:解压 到 pat ...

  6. Hadoop 源码阅读技巧

    http://www.cnblogs.com/xuxm2007/category/388607.html     个人谈谈阅读hadoop源代码的经验.首先,不得不说,hadoop发展到现在这个阶段, ...

  7. MySQL双主热备问题处理

    1. Slave_IO_Running: No mysql> show slave status\G *************************** 1. row *********** ...

  8. c#打包文件解压缩 C#中使用委托、接口、匿名方法、泛型委托实现加减乘除算法 一个简单例子理解C#的协变和逆变 对于过长字符串的大小比对

    首先要引用一下类库:using Ionic.Zip;这个类库可以到网上下载. 下面对类库使用的封装方法: 得到指定的输入流的ZIP压缩流对象 /// <summary> /// 得到指定的 ...

  9. 2014年8月25日，收藏家和杀手——面向对象的C++和C（一）

    近期事情特别多,睡眠也都非常晚,有点精神和身体混乱的感觉,所以想写写技术分析文章.让两者的我都调整一下.这篇技术分析文章是一直想写的,当前仅仅是开篇,有感觉的时候就写写,属于拼凑而成,兴许的篇章没有时 ...

  10. C递归算法与栈的分析,非全然二叉树遍历分析---ShinePans

                 对于递归,这里面的分析最好当然是用图形的方式来分析了.这里来总结一下 1.首先对于栈的理解: 先进后出,后进先出 先进后出 2.在进行非全然二叉树的存储之后,我们要做的是对其 ...