代码：

<!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. oracle审计例子

    1.数据库开启审计alter system set audit_trail=db,extended scope=spfile;shutdown immediatestartup 2.对某个表进行审计c ...

  2. kali linux 2.0配置更新源后apt-get update 报错

    这个是我/etc/apt/sources.list的更新源: deb http://http.kali.org/kali kali-rolling main contrib non-free deb ...

  3. bzoj 3560 DZY Loves Math V - 线性筛 - 扩展欧几里得算法

    给定n个正整数a1,a2,…,an,求 的值(答案模10^9+7). Input 第一行一个正整数n. 接下来n行,每行一个正整数,分别为a1,a2,…,an. Output 仅一行答案. Sampl ...

  4. PID算法控制简单理解

    1 传统的位式控制算法 用户期望值Sv(设定值)经控制算法输出一个输出信号OUT,输出信号加载到执行部件上(像MOS管等)对控制对象进行控制(步进电机.加热器等),控制对象的当前值(Pv)如速度通过传 ...

  5. topcoder srm 709 div1

    1 给定一个长度为n的整数数组A,重排列数组A使得下面计算出的X最大:(n不大于15,A中的大于等于0小于等于50) int X=0; for(int i=0;i<n;++i) X=X+(X^A ...

  6. Cmder + Babun 打造 Windows 好用的终端工具

    Babun a windows shell you will love Babun features the following: Pre-configured Cygwin with a lot o ...

  7. 【做题】apc001_f-XOR Tree——巧妙转化及dp

    对树上的路径进行操作是十分难处理的事情.一开始的思路主要针对于\(a_i<=15\)这一特殊性质上.于是考虑了\(a_i<=1\)的情况,然而除了糊出一个适用范围极小的结论外,并没有什么用 ...

  8. 编译 glibc-2.14 时出现的一个LD_LIBRARY_PATH不路径bug

    ../configure --prefix=/home/zzhy/wd/software/glibc-2.14 错误:checking LD_LIBRARY_PATH variable... cont ...

  9. jvm：垃圾收集器

    垃圾收集器: Serial 收集器: 单线程收集器,专注做收集,会暂停别的工作.收集效果好. ParNew 收集器: 是Serial的多线程版本.目前只有它能和CMS收集器配合.    Paralle ...

  10. computed 计算选项

    computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 ...