代码：

<!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. yolo3(目标检测)实测

    yolo是继faster-r-cnn后,原作者在目标检测领域进行的新研究.到了v3版本以后,虽然已经换人支持,但是更注重工程实践,在实际使用过程中突出感受就是 “非常快”,GPU加速以后能够达到实时多 ...

  2. Provinces of China

    https://en.wikipedia.org/wiki/Provinces_of_China#Province

  3. Junit中AssertTrue的使用

    assertTrue public static void assertTrue(String message, boolean condition) Asserts that a condition ...

  4. topcoder srm 390 div1

    problem1 link 记录一个模$k$之后的值是否出现过,出现过则出现循环,无解:否则最多$k$ 次一定能出现0. import java.util.*; import java.math.*; ...

  5. Python3 tkinter基础 Entry show textvariable 密码输入框

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. Super-palindrome 【可能是暴力】

    Super-palindrome 时间限制: 1 Sec  内存限制: 128 MB 提交: 486  解决: 166 [提交] [状态] [命题人:admin] 题目描述 You are given ...

  7. tp框架中的一些疑点知识-3

    rewrite就是伪静态, 伪静态就是 rewirte, 可以把入口地址隐藏掉. 兼容模式就是 普通模式 和 pathinfo模式的 结合, 前面是普通模式 ?s= , 后面的 模块/控制器/操作和参 ...

  8. P2519 [HAOI2011]problem a

    思路 神仙思路,就差一步就能想出来了... 看到第i个人给出的条件,发现有\(a_i\)个大于,\(b_i\)个小于并不好处理 考虑把条件转化成第i个人对应的排名处理,设第i个人的排名为\(a_i+1 ...

  9. P3261 [JLOI2015]城池攻占

    思路 左偏树维护每个骑士的战斗力和加入的深度(因为只能向上跳) 注意做乘法的时候加法tag会受到影响 代码 #include <cstdio> #include <algorithm ...

  10. vue中使用BetterScroll

    BetterScroll可以通过给content加min-height实现永远滚动 content千万不可以删除,千万不要在 content上写v-if