所有的三角形，都是通过盒子模型来设定。

border（边框）的不同大小来决定

border-width: 边框的宽度

border-style: 边框的样式

border-color: 边框的颜色

1：2个颜色

	<!DOCTYPE html>

	<html>

	<head>

		<title>css的直角三角形</title>

		<style type='text/css'>

			.content-trigon-zhijiao {

				width: 0px;

				height: 0px;

				border-color:   red blue blue red;

				border-width: 50px 50px 50px 50px;

				border-style: solid;

			}

		</style>

	</head>

	<body>

		<div class="title-trigon-zhijiao">css的直角三角形</div>

		<div class="content-trigon-zhijiao">

			<span><i></i></span>

		</div>

	</body>

	</html>

2：

3：

4：

5：

6：

盒子模型：





可以参考：

以下是比较全面的css绘制的图形：

https://css-tricks.com/examples/ShapesOfCSS/

纯css画直角三角形的更多相关文章

  1. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  4. 【原创】纯CSS画黄金梅丽号！

    代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAni ...

  5. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  6. 用纯CSS画大白

    纯CSS打造网页大白知识点:      首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...

  7. 纯css 画气泡

    我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...

  8. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  9. 8.17 纯css画一个着重号图标

    今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20p ...

随机推荐

  1. LODOP整页缩放，宽度、高度溢出缩放

    LODOP中,超文本超过打印项高度会自动分页,可以用语句进行缩放,让打印内容都在一页中.例如,整页缩放和高度溢出缩放.如下是三个语句及其效果,注意对内容缩放可能会导致变形哦,毕竟是不等比例缩放:LOD ...

  2. nginx之安装、多虚拟主机、反向代理和负载均衡

    一.web服务器与web框架 1.web服务器简介 Web 网络服务是一种被动访问的服务程序,即只有接收到互联网中其他主机发出的请求后才会响应,最终用于提供服务程序的Web服务器会通过 HTTP(超文 ...

  3. Spring MVC 使用介绍（十一）—— 跨域与静态资源访问

    一.跨域 服务端须在响应中添加相应响应头,从而允许跨域,具体可通过 public class CorsFilter extends OncePerRequestFilter { @Override p ...

  4. di.xml

    di.xml文件 该di.xml文件配置对象管理器要注入的依赖项. 领域和应用入口点 每个 模块 都可以具有全局和区域特定的di.xml文件.Magento读取di.xml系统中声明的所有配置文件,并 ...

  5. MT【319】分段递推数列

    已知数列$ x_n $满足$ 0<x_1<x_2<\pi $,且\begin{equation*} x_{n+1}= \left\{ \begin{aligned}x_n+\sin ...

  6. Codeforces 1079C Playing Piano（记忆化搜索）

    题目链接:Playing Piano 题意:给定长度为n的序列$a_i$,要求得到同样长度的序列$b_i$.满足一下条件: if $a_i < a_{i+1}$ then $b_i < b ...

  7. pycharm 运行错误信息显示乱码

    pycharm版本 解决方法:

  8. deepin安装mysql记录

    本文转载自http://www.linuxidc.com/Linux/2016-07/133128.htm sudo apt-get install mysql-server apt-get isnt ...

  9. Go语言系列（六）- 接口和反射

    接口 1. 定义: Interface类型可以定义一组方法,但是这些不需要实现.并且interface不能包含任何变量. type example interface{ Method1(参数列表) 返 ...

  10. python脚本 用sqoop把mysql数据导入hive

    转:https://blog.csdn.net/wulantian/article/details/53064123 用python把mysql数据库的数据导入到hive中,该过程主要是通过pytho ...