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

复制代码 代码如下:
#triangle-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid red; }

复制代码 代码如下:
#triangle-down {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-top: 100px solid red; }

复制代码 代码如下:
#triangle-left {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-right: 100px solid red;     border-bottom: 50px solid transparent; }

复制代码 代码如下:
#triangle-right {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-left: 100px solid red;     border-bottom: 50px solid transparent; }

复制代码 代码如下:
#triangle-topleft {     width: 0;     height: 0;     border-top: 100px solid red;     border-right: 100px solid transparent; }

复制代码 代码如下:
#triangle-topright {     width: 0;     height: 0;     border-top: 100px solid red;     border-left: 100px solid transparent; }

复制代码 代码如下:
#triangle-bottomleft {     width: 0;     height: 0;     border-bottom: 100px solid red;     border-right: 100px solid transparent; }

复制代码 代码如下:
#triangle-bottomright {     width: 0;     height: 0;     border-bottom: 100px solid red;     border-left: 100px solid transparent; }
 
画出边框的:
最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

纯CSS绘制三角形(各种角度)类似于使用字符画法,根据位移不同,也可以使用两个元素画出三角边框的更多相关文章

  1. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

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

  2. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

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

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

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

  4. 纯CSS绘制三角形(各种角度)

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

  5. 纯 CSS 绘制三角形(各种角度)

     转载:https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html       Triangle Up #triangle-up { widt ...

  6. 纯CSS绘制三角形

    扒segmentfault的导航栏时候发现的,用了个span标签写了个三角形出来,第一次发现,好神奇,查了下还有挺多种玩法的.基本的用法就是将盒子的width和height设为0,然后用border搭 ...

  7. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

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

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

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

  9. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

随机推荐

  1. 雷林鹏分享:C# 委托(Delegate)

    C# 委托(Delegate) C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托 ...

  2. mysql数据库切分

    一.数据的垂直切分概念:数据的垂直切分,也可以称之为纵向切分.将不同的表分散到不同的数据库主机中.一个应用系统,总体功能肯定是由很多个功能模块所组成的,而每一个功能模块所需要的数据对应到数据库中就是一 ...

  3. 关于controller中调用多个service方法的问题

    一般service方法是有事务的,把所有操作封装在一个service方法中是比较安全的. 如果在controller中调用多个service方法,只有查询的情况下是可以这样的.

  4. Mass Change Queries CodeForces - 911G (线段树合并)

    链接 大意: 给定序列, 每次操作将区间[l,r]中的x全改为y, 最后输出序列 权值范围比较小, 对每个权值开一颗线段树, 每次将x合并到y上即可 #include <iostream> ...

  5. vijos1746 floyd

    小D的旅行 旅行是一件颇有趣的事情,但是在旅行前规划好路线也很重要. 现在小D计划要去U国旅行. U国有N个城市,M条道路,每条道路都连接着两个城市,并且经过这条道路需要一定的费用wi. 现在小D想要 ...

  6. 将 HttpPostedFile 转换成 Image 或者 Bitmap

    代码如下: HttpFileCollection httpfiles = context.Request.Files; files = httpfiles[i]; Image im = Image.F ...

  7. O(logn)二叉树中的意义----高性能(四)

    转载地址:https://zhidao.baidu.com/question/239708227508660244.html?qbl=relate_question_2&word=%CA%B1 ...

  8. 远程桌面连接 [Content] 出现身份验证错误。 要求的函数不受支持

    [Window Title] 远程桌面连接 [Content] 出现身份验证错误. 要求的函数不受支持 以上是我远程得时候报的错.   下面直接上  最NB得解决方案.不管用直接在下面评论 通过管理控 ...

  9. python *args **kwargs,传入不固定的参数给函数,或者传入很多的内容给函数,常用在构造函数中。

    ''' 例1:展示*args的用法,传入多个参数,不进行预先定义. 本例传入了3个参数.没有预先定义.在函数内自动生成元组() ''' def q1(*args): print('例1') print ...

  10. 关于反射的BindingFlag浅析

    MSDN关于BindingFlag的文档地址:https://msdn.microsoft.com/zh-cn/library/cexkb29a BindFlags作为一个特别的标志量,在反射中通过这 ...