效果图:

代码:

<!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. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  5. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  6. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  7. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  8. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

  9. css画三角形,梯形

    (根据调节边框的宽度来调节三角形形状) <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  10. 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...

随机推荐

  1. Webpack探索【7】--- sourceMap、自动构建刷新功能详解

    本文主要讲sourceMap.自动构建刷新功能.

  2. Java中的String,StringBuilder,StringBuffer三者的区别(转发:https://www.cnblogs.com/su-feng/p/6659064.html)

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

  3. Javaweb基础--->利用监听器统计在线用户数量和用户信息

    首页布局:index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  4. python基础3 ---python数据类型二

    ython基础 一.python数据类型     ------列表(list) 1.定义:[]内以逗号分隔,按照索引,存放各种数据类型,每个位置代表一个元素 特性:可存放多个不同类型的值:可修改指定索 ...

  5. ubuntu安装pip和python

    安装pip2sudo apt-get install pip 这样安装的是pip2不支持Python3.x,可以使用如下命令安装pip3 sudo apt-get install python3-pi ...

  6. [算法]打印N个数组的整体最大Top K

    题目: 有N个长度不一的数组,所有的数组都是有序的,请从大到小打印这N个数组整体最大的前K个数. 例如: 输入含有N行元素的二维数组代表N个一维数组. 219,405,538,845,971 148, ...

  7. java入门了解12

    1.SequenceInputStream序列流:能将其他输入流的串联 用处:读完第一个再去读第二个输入流 用法:构造方法:SequenceInputStream(InputStream s1,Inp ...

  8. java入门了解之快捷键

    IDE(Integrated Development Environment ): 集成开发环境,集合开发.运行.调试于一体的一个软件 Eclipse 是一个开放源代码的.基于Java的可扩展开发平台 ...

  9. 日期工具类 DateUtils(继承org.apache.commons.lang.time.DateUtils类)

    /** * */ package com.dsj.gdbd.utils.web; import org.apache.commons.lang3.time.DateFormatUtils; impor ...

  10. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...