我们的网页因为 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. 纯CCS绘制三角形箭头图案

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

  9. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. 自定义UIPageControl

    iphone的UIPageControl控件可以显示用户huan'dong滑动到的页码.但是里面的小点的颜色时默认的白色.如果背景也是白色的hu话,你就悲剧了.于是乎上网找了一些资料,找到了改变UIP ...

  2. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  3. centOS7 修改hostname

    hostnamectl set-hostname 你要修改到的hostname   localectl set-locale LANG=要修改的语言     介绍个Centos 7很不错的教程网站:h ...

  4. dedecms头部标签(标题,关键词,描述标签)(借用)

    先说说dedecms头部标题,关键词,描述标签的作用我相信网络上也有很多这样的信息,那为什么我还要写这个?因为这个对我们初学者来说还是比较重要的,因为做SEO就要用到这些标签.首先我写下首页头部标签我 ...

  5. PostgresSQL 学习资料记录处

    PostgresSQL 学习资料记录处  博客:http://francs3.blog.163.com PostgreSQL9.4 中文手册:http://www.postgres.cn/docs/9 ...

  6. 听VOA还不如学这些 (转自知乎恶魔奶爸)

    该专栏文章网址 http://zhuanlan.zhihu.com/aisapo/19634180 鉴于知乎无法插图片和音频,所以有了这篇教程集合,大家看这个就足够了其实 每次一学英语,材料无非就是V ...

  7. 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  8. html中的元素和节点

    元素(Element)和结点(Node)的区别, 元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如<div>...</div>. 但是一个结点不一定是一个元素 ...

  9. javascript 字符串方法名调用

    项目中有时候需要通过字符串传递方法名称,供页面调用 var ParameterDefaultCallMethod = Request("ParameterDefaultCallMethod& ...

  10. Yii2中自带分页类实现分页

    1.首先写控制器层 先引用pagination类 use yii\data\Pagination; 写自己的方法: function actionFenye(){        $data = Fie ...