效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三角形</title>

    <style>

        #tri{

            width: 0;

            height: 0;

            border-top: 0 solid transparent;

            border-left: 10px solid transparent;

            border-bottom: 20px solid red;

            border-right: 10px solid transparent;

            background-color: white;

        }

    </style>

</head>

<body>

<div id="tri"></div>

</body>

</html>

自己的理解（By8.13）：

三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也就是三角形的颜色，其余三边不设置颜色。
　　说白了就是，宽高设为0，只设置边框，用边框去填充。
　　拿上边的三角形说吧，尖朝上，所以上边的border为0，没边框。
　　颜色也就是下边框填充的。三角形的颜色也就是下边框的颜色。
如果想要设置三角形的大小，修改代码为：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三角形</title>

    <style>

        #tri{

            width: 0;

            height: 0;

            border-top: 0 solid transparent;

            border-left: 20px solid transparent;

            border-bottom: 20px solid red;

            border-right: 20px solid transparent;

            background-color: white;

            /*三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也是三角形的颜色，其余三边不设置颜色*/

        }

    </style>

</head>

<body>

<div id="tri"></div>

</body>

</html>


效果为：




只需设置需要加宽的方向的border-width即可。


代码再次修改为：






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三角形</title>

    <style>

        #tri{

            width: 0;

            height: 0;

            border-top: 0 solid transparent;

            border-left: 20px solid transparent;

            border-bottom: 20px solid red;

            border-right: 20px  transparent;

            background-color: white;

        }

    </style>

</head>

<body>

<div id="tri"></div>

</body>

</html>






看效果：




一个直角三角形就出来了，其他自己尝试了。




下面绘制空心三角形。（这个说白了也就用个背景颜色去挡住"空心"的地方）
效果图：

代码：






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>空心三角形</title>

    <style>

        .triangle{

            width: 0;

            height:0;

            border-top: 0 solid transparent;

            border-bottom: 30px solid blueviolet;

            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            position: relative;

        }

        .triangleInner{

            width: 0;

            height:0;

            border-top: 0 solid transparent;

            border-bottom: 28px solid white;

            border-left: 8px solid transparent;

            border-right: 8px solid transparent;

            position: absolute;

            left: -8px;

            top:2px;

        }

    </style>

</head>

<body>

<div class="triangle">

    <div class="triangleInner"></div>

</div>

</body>

</html>








再次创新下代码为：






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>空心三角形</title>

    <style>

        .triangle{

            width: 0;

            height:0;

            border-top: 0 solid transparent;

            border-bottom: 10px solid darkorange;

            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            position: relative;

            top:1px;

            left: 20px;

        }

        .triangleInner{

            width: 0;

            height:0;

            border-top: 0 solid transparent;

            border-bottom: 8px solid white;

            border-left: 8px solid transparent;

            border-right: 8px solid transparent;

            position: absolute;

            left: -8px;

            top:2px;

        }

        .block{

            width: 200px;

            height:100px;

            border:1px solid darkorange;

            text-align: center;

            line-height: 100px;

            border-radius: 10px;

        }

    </style>

</head>

<body>

<div class="triangle">

    <div class="triangleInner"></div>

</div>

<div class="block">hello world</div>

</body>

</html>






效果图wei：




 


　　
												


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

    
						
  1. css画三角形原理解析
		
    <div id="div1"></div><div id="div2"></div><div id=&qu ...
    
		
    2. 
						
  2. 纯css画三角形
		
    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
    
		
    3. 
						
  3. CSS画三角形引发的一些思考
		
      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
    
		
    4. 
						
  4. HTML 和 CSS 画三角形和画多边行基本原理及实践
		
    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
    
		
    5. 
						
  5. 如何用CSS画三角形
		
    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...
    
		
    6. 
						
  6. 理解纯CSS画三角形
		
    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
    
		
    7. 
						
  7. 用css画三角形
		
    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...
    
		
    8. 
						
  8. CSS 画三角形、圆
		
    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...
    
		
    9. 
						
  9. css画三角形，梯形
		
    (根据调节边框的宽度来调节三角形形状) <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
    
		
    10. 
						
  10. 2016/2/24  css画三角形    border的上右下左的调整   以及内区域的无限变小   边界透明
		
    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. python(pytest)+allure+jenkins 实现接口自动化的思路
			
    效果图镇楼: 上述各模块作用: python(pytest): 1:用于读测试用例(本次用例写在csv文件中) 2:环境配置相关 3:提取1中的测试数据,组成请求体 4:发送请求 5:获取结果 6:断 ...
    
			
    2. 
						
  2. 我的Android进阶之旅------>Android中的布局优化 include、merge 、ViewStub
			
    1.如何重用布局文件? 可以使用<include>标签引用其他的布局文件,并用android:id属性覆盖被引用布局文件中顶层节点的android:id属性值.代码如下: <!--引 ...
    
			
    3. 
						
  3. linux c编程：进程控制(三)_exec函数
			
    fork()函数通过系统调用创建一个与原来进程(父进程)几乎完全相同的进程(子进程是父进程的副本,它将获得父进程数据空间.堆.栈等资源的副本.注意,子进程持有的是上述存储空间的“副本”,这意味着父子进 ...
    
			
    4. 
						
  4. Tensorflow官方文档中文版——第一章
			
    第一示例: import tensorflow as tf import numpy as np x_data=np.float32(np.random.rand(,))#随机输入 y_data=np ...
    
			
    5. 
						
  5. window 上创建 .gitignore文件
			
    由于 git默认不上传空文件夹,如果需要上传空文件夹,那么需要这样上传空文件,官方给出这样的做法~~ (需要创建.gitignore文件) 在linux 上比较好操作了,这里说下在window 上 创 ...
    
			
    6. 
						
  6. scala语法解析(解码指环)
			
    看惯了JAVA的语法,再看scala的语法,有的晦涩难懂.正好遇到一个介绍scala语法的文章,就直接截图留念.省的再临时抱佛脚了.
    
			
    7. 
						
  7. ubuntu切换到root
			
    sudo+命令,输入当前用户密码后以root权限执行命令,有时间限制且仅限当前命令. sudo -i,输入当前用户密码后以root权限登录shell,无时间限制.使用exit或logout退出. su ...
    
			
    8. 
						
  8. ubuntu14.04 python2.7安装MySQLdb
			
    安装依赖: sudo apt-get install libmysqlclient-dev libmysqld-dev python-dev python-setuptools 安装MySQLdb p ...
    
			
    9. 
						
  9. 左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案，不用浮动用绝对定位和margin-left
			
    google的实现方式是: <div class="mw"> <a href="/" id="mlogo">  &l ...
    
			
    10. 
						
  10. SpringCloud-服务的注册与发现(Eureka)
			
    SpringCloud 简介 SpringCloud为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行环境简 ...
    
			
    11.