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

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. 从源码看springboot默认的资源文件和配置文件所在位置

    首先,使用的springboot版本是2.X,在这里写一点学习springboot的记录 springboot需要配置的不多,但也并不是完全不需要配置就可以顺畅使用,这里看一下它默认的配置 首先,看一 ...

  2. css高度自適應

    高度自適應意思是高度能隨著瀏覽器的大小的變化而變化.

  3. Centos7 配置和链接FTP

    1:安装vsftpd组建:  yum -y install vsftpd  安装完成以后在目录/etc/vsftpd/vsftpd.conf文件是vsftp的配置文件 2:添加一个专门用来登陆vsft ...

  4. 多进程multiprocessing

    PACKAGE CONTENTS connection dummy (package) forking heap managers pool process queues reduction shar ...

  5. B. Vova and Trophies 字符串预处理+思维+贪心

    题意:给出一个字符串 只有G和S  可以交换任意两个位置的字符一次 问 最长的G的长度是多少 思路:预处理字符串 把相同的G粘成一个G 记一下数量  字符串变为 GSSGSGGSGSSG 相邻有一个S ...

  6. 跟我一起写Makefile

    跟我一起写Makefile 来源  https://blog.csdn.net/fhaitao900310/article/details/82657193 陈皓 (博客地址:http://blog. ...

  7. vscode设置python3.7调试环境（已更新）

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai CentOS安装Python3.7:https://www.cnblogs.com/do ...

  8. Hack The Box 获取邀请码

    TL DR; 使用curl请求下面的地址 curl -X POST https://www.hackthebox.eu/api/invite/generate {"success" ...

  9. RabbitMQ队列的使用

    为什么要用RabbitMQ 以常见的订单系统为例,用户点击[下单]按钮之后的业务逻辑可能包括:扣减库存.生成相应单据.发红包.发短信通知.在业务发展初期这些逻辑可能放在一起同步执行,随着业务的发展订单 ...

  10. 四大解析器（BeautifulSoup、PyQuery、lxml、正则）性能比较

    用标题中的四种方式解析网页,比较其解析速度.当然比较结果数值与电脑配置,python版本都有关系,但总体差别不会很大. 下面是我的结果,lxml xpath最快,bs4最慢 ==== Python v ...