转载:https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html
 
 
 

Triangle Up

#triangle-up {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Triangle Down

#triangle-down {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triangle Left

#triangle-left {
width:;
height:;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Right

#triangle-right {
width:;
height:;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Top Left

#triangle-topleft {
width:;
height:;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Top Right

#triangle-topright {
width:;
height:;
border-top: 100px solid red;
border-left: 100px solid transparent; }

Triangle Bottom Left

#triangle-bottomleft {
width:;
height:;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Bottom Right

#triangle-bottomright {
width:;
height:;
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绘制三角形(各种角度)类似于使用字符画法,根据位移不同,也可以使用两个元素画出三角边框

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

  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. windows7 64位使用anaconda傻瓜式安装tensorflow

    1.下载anaconda并一键安装 登录网页:https://www.anaconda.com/download/ 这里选择Python3.6 version 64-Bit Graphlcal Ins ...

  2. 【bzoj 4833】[Lydsy1704月赛]最小公倍佩尔数

    Description 令 $(1+\sqrt 2)^n=e(n)+\sqrt 2\cdot f(n)$ ,其中 $e(n),f(n)$ 都是整数,显然有 $(1-\sqrt 2)^n=e(n)-\s ...

  3. Unknown system variable 'query_cache_size'] with root cause

    Unknown system variable 'query_cache_size'] with root cause 出现这个错误是因为mysql连接数据库的版本不对, mysql-connecto ...

  4. MySQL学习13 - 索引

    一.索引的介绍 二 .索引的作用 三.常见的几种索引: 3.1 普通索引 3.2 唯一索引 3.3 主键索引 3.4 组合索引 四.索引名词 五.正确使用索引的情况 什么是最左前缀呢? 六.索引的注意 ...

  5. springMVC的controller

    控制器controller 负责处理DispatcherServlet分发请求,把业务处理层封装成一个model,然后把该model返回给对应的view. @Controller 用于标记在一个类上, ...

  6. will not be managed by Spring/ [managed: 15; max: 15]

    检查事务配置 检查 mybatis 配置文件扫描路径是否正确 <!-- 自动扫描 --> <context:component-scan base-package="com ...

  7. pycharm+selenium搭建环境

    1.在你的python安装目录D:\Python36\Scripts下执行pip install selenium 2.安装完成后最好直接打开python,在下面输入from selenium imp ...

  8. L2-007 家庭房产 (25 分) (并查集)

    链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805068539215872 题目: 给定每个人的家庭成员和其自己名 ...

  9. Spring Cloud 2-Config 分布式配置中心(七)

    Spring Cloud  Config  1.github配置 2.服务端配置 pom.xml application.xml Application.java 3.配置和命名 1. 配置加载顺序 ...

  10. mac配置变量失败导致ls命令都失效

    1.在命令行中输入 export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端 ...