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

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. nginx(二)nginx的安装

    下载 nginx官网下载地址 把源码解压缩之后,在终端里运行如下命令: ./configure make make install 默认情况下,Nginx 会被安装在 /usr/local/nginx ...

  2. Go语言中的Iota

    一.复习常量 提到Iota这个关键字,就必须要复习一下Go语言的常量. 1.Go语言的常量一般使用const声明 2.Go语言的常量只能是布尔型.数字型(整数型.浮点型和复数)和字符串型 3.Go语言 ...

  3. oracle表的操作SQL语句

    这篇文章的内容包括:表的増删改查,字段的増删改查,主键.外键.唯一.非空.默认约束的増删改   查看自己用户的所有表: select * from user_tab_comments;    www. ...

  4. jzoj6101. 【GDOI2019模拟2019.4.2】Path

    题目链接:https://jzoj.net/senior/#main/show/6101 记\(f_i\)为从\(i\)号点走到\(n\)号点所花天数的期望 那么根据\(m\)条边等可能的出现一条和一 ...

  5. 重建docker实例

    1.显示当前运行的docker实例: [root@docker-test /]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORT ...

  6. [jzoj]4271. 【NOIP2015模拟10.27】魔法阵(37种转移的dp)

    题意不说 应该这辈子都不会忘记了... 这是我人生中做的最SB的一道DP题. 真的打的我心态崩了.... 可是竟然被我调出来了..... 也是没谁了... 我们设\(F[i][j][S]\)表示到第\ ...

  7. makefile :=和+=

    经常有人分不清= .:=和+=的区别  这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...

  8. django系列5:视图

    在Django中,网页和其他内容由视图提供.每个视图都由一个简单的Python函数(或基于类的视图的方法)表示.Django将通过检查所请求的URL(确切地说,是域名后面的URL部分)来选择视图. 在 ...

  9. [USACO10DEC] Treasure Chest

    题目链接 90 Points:智障的区间 DP--设 dp[i][j] 表示区间 [i, j] 能取的最大价值,但我还是 sd 地开了第三维表示先取还是后取的价值. 交上去以为能 A,结果 #2 开心 ...

  10. 剑指Offer_编程题_20

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印.   /* struct TreeNode { int val; struct TreeNode *left; struct TreeN ...