代码：

<!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. 接口自动化（atp，utp）

    atp:数据驱动 utp:代码驱动 pip install -r file.txt #安装文件里面有的模块 pip freeze > file.txt #导出你已经安装好的第三方模块

  2. CentOS6.8下安装mysql

    转自https://blog.csdn.net/jeffleo/article/details/53559712?utm_source=itdadao&utm_medium=referral ...

  3. Manjaro kde 18.0安装与基本配置

    目录 更换源镜像.更新系统 安装搜狗输入法 安装软件 系统配置 最后清理垃圾 首先用Rufus制作启动U盘安装,设置好时间和日期等 更换源镜像.更新系统 排列源(只选清华源mirrors.tuna.t ...

  4. upc组队赛1 流连人间的苏苏

    流连人间的苏苏 题目描述 苏苏在做红尘仙的任务时,发现坐落于风景秀丽.四季如春的昆明市的云南中医学院. 没过多久,苏苏就喜欢上了这个学校.以致于苏苏忘了回涂山的时间,现在她只剩下d天的时间待在云南中医 ...

  5. JavaI/O（输入/输出）

    File类 通过File类可以在程序中操作文件和目录,File能新建.删除.重命名文件和目录,但是不能访问文件内容本身. 理解I/O流 流(stream)是从起源(source)到接收(sink)的有 ...

  6. 【matlab】笔记_1

    基本操作 ans 最近计算的答案 clc 清除命令行窗口 diary 将命令行窗口文本保存到文件中 矩阵 用逗号 (,) 或空格分隔各行元素. 用分号(;)分隔各列元素. a':装置矩阵. 要执行元素 ...

  7. How to install Bekeley Extension Software Switch(BESS)?

    参考: Github BESS How to install Bekeley Extension Software Switch(BESS)? Introduction BESS is a modul ...

  8. oracle批量删除某用户下的表

    昨天干了一天的体力活,到快下班时被要求删除一批测试库上错误的表,主要是这些表的字段和生产上字段顺序对不上,然后让我写个脚本,让dba执行一下,主要是删表这种东西我们都没权限. 然后,我就被难到了,我记 ...

  9. Lintcode452-Remove Linked List Elements-Easy

    Remove Linked List Elements Remove all elements from a linked list of integers that have value val. ...

  10. python写web服务器

    #coding = utf-8 from http.server import BaseHTTPRequestHandler, HTTPServer class RequestHandler(Base ...