代码：

<!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. linux配置powerline(bash/vim)美化

    安装powerline需要pip 链接:https://pan.baidu.com/s/1Jc59VD35PYic2fTK5v8h1w 密码:otfp pip curl https://bootstr ...

  2. Kali linux 2018安装后全屏乱码解决

    安装的时候选择了中文, 后来安装成功后成了全部乱码的. 原因是,系统没有中文字体显示安装包, 下载一个 sudo apt-get install ttf-wqy-zenhei 重启解决!

  3. Codeforces 750E New Year and Old Subsequence - 线段树 - 动态规划

    A string t is called nice if a string "2017" occurs in t as a subsequence but a string &qu ...

  4. shelve模块,sys模块,logging模块

    1.shelve模块 用于序列化的模块,shelve模块比pickle模块简单,只有open函数,返回类似字典的对象,可读可写;key必须为字符串,而值可以是python所支持的数据类型. impor ...

  5. Qt重绘机制

    一.引发重绘的事件 1.调用repaint() 2.调用uodate() 二.控件hide或者show 三.其他 ps: repaint函数是立即重绘,没有优化 update会优化,异步重绘,所以如果 ...

  6. uniGUI试用笔记（九）

    uniGUI执行程序部署有3种形式 1.ISAPI模式 部署在IIS或Apache,程序编译为Dll形式,没有试,准备后续专门测试一下. 2.标准执行文件模式 将软件编译成一个独立的Exe文件,包括了 ...

  7. uniGUI出新版本了，0.97.0.1081

    uniGUI出新版本了,0.97.0.1081,试用版0.97.0.1075,支持Delphi2006~XE7.下载地址是: http://www.unigui.com/downloads 已在XE6 ...

  8. Linux下调整ext3分区大小【转】

    本文转载自:https://blog.csdn.net/cruise_h/article/details/22403529 本文讨论如何再不丢失数据的情况下调整已有ext3分区的大小,包括: 压缩已有 ...

  9. sqlitestudio

    SQLite数据库的特性 特点: 1.轻量级2.独立性,没有依赖,无需安装3.隔离性 全部在一个文件夹系统4.跨平台 支持众多操作系统5.多语言接口 支持众多编程语言6.安全性 事物,通过独占性和共享 ...

  10. Depth-first search and Breadth-first search 深度优先搜索和广度优先搜索

    Depth-first search Depth-first search (DFS) is an algorithm for traversing or searching tree or grap ...