代码：

<!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. 什么是ip地址，什么是私有地址

    ip地址链接:https://jingyan.baidu.com/article/f96699bbf23089894e3c1be7.html 私有地址链接:https://baike.baidu.co ...

  2. Bugku-CTF之flag.php(点了login咋没反应)

      Day2   flag.php(点了login咋没反应)   地址:http://123.206.87.240:8002/flagphp/      

  3. Codeforces Round #425 (Div. 2) Problem D Misha, Grisha and Underground (Codeforces 832D) - 树链剖分 - 树状数组

    Misha and Grisha are funny boys, so they like to use new underground. The underground has n stations ...

  4. phpMyAdmin - Error

    centos7.5 原因:权限问题 解决方法:授权 [root@web01 code]# groupadd -g666 www [root@web01 code]# useradd -u666 -g6 ...

  5. Convert DataFrame string complex i to j python // “Cloning” row or column vectors

    https://stackoverflow.com/questions/30808286/convert-dataframe-string-complex-i-to-j-python https:// ...

  6. 【字符串区别】SQLServer中char、varchar、nchar、nvarchar的区别：

    一.定义 char:    固定长度,存储ANSI字符,不足的补英文半角空格. nchar:   固定长度,存储Unicode字符,不足的补英文半角空格 varchar:  可变长度,存储ANSI字符 ...

  7. Trimmomatic过滤Illumina低质量序列

    1. 下载安装 直接去官网下载二进制软件,解压后的trimmomatic-0.36.jar即为我们需要的软件 官网: http://www.usadellab.org/cms/index.php?pa ...

  8. 完全卸载oraclean安装

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...

  9. jvm:分析工具

    bin/jvisualvm.exe 可查看类实例数 bin/jconsole.exe 监控线程,堆,等 http://blog.csdn.net/yaowj2/article/details/7107 ...

  10. (转载)http和socket之长连接和短连接区别

    TCP/IPTCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议.在传输层中有TCP协议与UDP协议.在应用层有: ...