代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画三角形</title>
<style>
#trip{
width:0px;
height:0px;
border-top:50px solid white;
border-right:50px solid white;
border-bottom:50px solid green;
border-left:50px solid white;
}
</style>
</head>
<body>
<div id="trip">
</div>
</body>
</html>

效果如图显示:

css趣味案例：画三角形的更多相关文章

  1. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  3. Sass mixin 使用css border属性画三角形

    To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...

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

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

  5. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  6. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

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

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

  8. 纯css画三角形

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

  9. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

随机推荐

  1. CocoaPods创建自己的公开库、私有库

    http://www.cocoachina.com/ios/20180308/22509.html

  2. linux远程方式，以及基础命令

    最近准备学习linux系统,购买了阿里巴巴的云服务器,系统为CentOS. 一.连接实例 1.使用管理终端. 这是阿里巴巴云服务器管理控制台,需要登录阿里巴巴,找到自己实例后,点击右侧远程连接即刻. ...

  3. 2015,3,10 2(南阳理工ACM)

    描述有一个整型偶数n(2<= n <=10000),你要做的是:先把1到n中的所有奇数从小到大输出,再把所有的偶数从小到大输出.   输入 第一行有一个整数i(2<=i<30) ...

  4. ng-model绑定的是ng-option中的什么？

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. linux下如何按行将文件切割成多个小文件

    答: split -l <行数> <目标文件> <切割后的文件前缀> 举例如下: split -l 1000 jello.txt jello 将jello.txt文 ...

  6. try finally 执行顺序问题

    有return的情况下try catch finally的执行顺序 在遇到Exception 并且没有catch的情况下finally语句块没有执行 System.exit(0),终止了 Java 虚 ...

  7. Jdk在window环境下的安装与配置详解

    本文为博主原创,转载请注明出处: 1.2  Java程序开发环境的配置 java开发工具包:java开发工具:记事本 IDE,这个只能写小程序,写大程序需要集成开发工具:反编译工具(我们可以在网上找一 ...

  8. js url参数和对象互转

    function param(a) { var s = [], rbracket = /\[\]$/, isArray = function(obj) { return Object.prototyp ...

  9. _event_team

    EventId 事件ID TeamId 事件玩家分组,仅传送(0为联盟 1为部落)对线(防守为1,进攻为2),自定义阵营(_faction表自定义阵营ID),公会(公会guid) TeamName 事 ...

  10. JTopo使用心得

    因为工作关系,最近用到了拓扑图,找了一溜工具后,发现了这个--JTopo,纯国产而且免费 当然了如果你英文水平足够好的话.也可以看看这些英文的做拓扑图的工具,以下网站出自知乎回答:开源HTML5 绘图 ...