<!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. Openlayers3 编辑要素

    参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 [学习笔记之Openlayers3]要素保存篇(第四篇) openlayers实 ...

  2. 【swagger】2.swagger提供开发者文档--返回统一格式篇【spring mvc】【spring boot】

    接着上一篇来说, 不管正常返回结果还是后台出现异常,应该返回给前台统一的响应格式. 所以这一篇就为了应对解决这个问题. ======================================== ...

  3. [C++11]_[0基础]_[左值引用声明和右值引用声明]

    场景: 在 remove_reference 结构体中能看到右值引用的身影 &&, 那么这里的右值引用究竟有什么用呢? 常常也发现int& 和int&& 这两种 ...

  4. 百科知识 ass文件如何打开

    直接拖入视频即可播放 鼠标右键 用记事本打开 也有一些软件支持比如POPSUB(也比较方便调整时间轴) 如果你是说如何加载字幕的话 用VOBSUB是最好的... ASS是视频的字幕,和视频放在同一文件 ...

  5. 关于Adapter对数据库的查询、删除操作

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzIxMDYyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. HDU ACM 1073 Online Judge -&gt;字符串水题

    分析:水题. #include<iostream> using namespace std; #define N 5050 char a[N],b[N],tmp[N]; void Read ...

  7. jquery $.proxy使用 Jquery实现ready()的源码

    jquery $.proxy使用   在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: 1 //正常的this使用 2 $('#myElement') ...

  8. Jenkins Robot framework 持续集成环境搭建

    为什么我们要引入RF?其实最初我们引入RF是为了能够快速的开展自动化验收测试,为敏捷保驾护航.这其中有个重要的工具Jenkins,同时也是应群里朋友们的要求,这次就来介绍一下RF如何快速便捷的结合Je ...

  9. DM8168 unrecoverable error: OMX_ErrorBadParameter (0x80001005) [resolved]

    DM8168 custom board 成功启动系统之后想先測一下8168编解码功能,把开发包里的examples跑一遍.启动完毕后.连上HDMI显示,在starting Matrix GUI app ...

  10. Laravel建站04--建立后台文章管理

    路由配置 Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], fu ...