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

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. 拷贝文件到服务器 提示FTP文件夹错误

    FTP文件夹错误将文件复制到FTP服务器时发生错误.请检查是否有权限将文件放到该服务器上.详细信息:200 Type set to I.227Entering Passive Mode (122,11 ...

  2. 带拦截器配置的 struts.xml文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  3. 关于计时器的js函数

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 如何破解加密了的word文档

    https://blog.csdn.net/huangbaokang/article/details/79630223 变成xml文件格式之后--查找在documentProtection前面加上un ...

  5. Java爬取12306余票

    一.前言 今年国庆和中秋一起放,虽然很欢快,但是没有票了!!! 于是自己倒腾了一个查询余票的小程序. 二.准备工作 1.先打开12306的页面 2.然后右键检查,点network 3.再点一下1230 ...

  6. Go语言的通道(1)-无缓冲通道

    前言: 上文中我们采用了[原子函数]已经[共享锁]两种方式分别对多个goroutine进行了同步,但是在go语言中提供了另一种更好的方式,那就是使用通道(Channel). 一.通道是什么? 其实无论 ...

  7. Django 路由系统

    Django 路由系统 基本格式 from django.conf.urls import url urlpatterns = [ url(正则表达式, views视图函数,参数,别名), ] 参数说 ...

  8. Meterpreter提权详解

      0x01 Meterpreter自动提权 1.生成后门程序 我们在kali的命令行下直接执行以下命令获得一个针对windows的反弹型木马: msfvenom -p windows/meterpr ...

  9. Maven pom文件标签解析大全

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...

  10. apache http跳转到https代码

    <VirtualHost *:> ServerAdmin webmasterexample.com DocumentRoot "/mnt/www/" ServerNam ...