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

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超文本简短问答和相关内容

    html样式查看lodop内部解析的html信息,见http://www.c-lodop.com/faq/pp8.html分析差异点,因浏览器版本不同遵循的html标准不同,造成某些标签属性显示有差异 ...

  2. Java BitSet使用场景和示例

    一.什么是BitSet? 注:以下内容来自JDK API: BitSet类实现了一个按需增长的位向量.位Set的每一个组件都有一个boolean值.用非负的整数将BitSet的位编入索引.可以对每个编 ...

  3. JS 中的原型 -- prototype、__proto__ 以及原型链

    原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...

  4. centos6 mongodb 安装

    1. 下载MongoDB 官网下载地址 https://www.mongodb.com/download-center#community 下载地址 32位 http://dl.mongodb.org ...

  5. [BZOJ 2285] [SDOI 2011] 保密

    Description 传送门 Solution 这道题的最大难点在于读懂题意(雾 分数规划求出 \(n\) 到 \(1\cdots n_1\) 每个点的最小 \(\sum\frac{t_i}{s_i ...

  6. 洛谷P3953逛公园

    题目 作为\(NOIp2017D1T3\) 这个题还是很良心的,至少相对于\(NOIp2018\)来说,希望\(NOIp2019\)不会这么坑吧. 这个题可以作为记忆化搜索的进阶题了,做这个题的方法也 ...

  7. elk每日清除30天索引脚本

      日常elk产生日志太多,故写个脚本放在定时任务,定时清理脚本 查询索引: curl -XGET 'http://127.0.0.1:9200/_cat/indices/?v'   删除索引: cu ...

  8. Linux Centos7.x 安装部署Mysql5.7几种方式的操作手册

    简述 Linux  Centos7.x 操作系统版本下针对Mysql的安装和使用多少跟之前的Centos6之前版本有所不同的,下面介绍下在centos7.x环境里安装mysql5.7的几种方法: 一. ...

  9. <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

    <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+re ...

  10. 第五节:WebApi的三大过滤器

    一. 基本说明  1. 简介: WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时,会自动把MVC的程序集也引入进来,所以我们在使用WebApi下的过滤器的 ...