代码：

<!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. phpstorm 配置点右上角浏览器图标时用浏览器打开当前页面

    文件>设置 只要这一步就可以这样了

  2. 20145308 《网络对抗》 MAL_免杀原理及实践 学习总结

    20145308 <网络对抗> MAL_免杀原理及实践 学习总结 实践内容 (1)理解免杀技术原理 (2)正确使用msf编码器,veil-evasion,自己利用shellcode编程等免 ...

  3. uniGUI试用笔记（三）

    uniGUI下的MessageDlg使用发生了变化,最大的特点是: 1.成为了uniGUIForm的成员函数: 2.变成过程(procedure)了,也就是没有返回值了,使得程序不再具有线程阻塞性. ...

  4. js 根据对象属性对数组进行按字母排序

    $scope.input.sort(compare('ticked','name')); var compare = function(ticked, name){ return function(a ...

  5. RHEL7防火墙策略设置

    注意查看firewall防火墙状态,并设置. 打开防火墙且没有放行端口的情况下rhel7这台机器是ping不通的. 放行端口需要永久放行,加--permernant,否则重启后失效,仍然无法访问该端口 ...

  6. nowcoder 合并回文子串

    链接:https://www.nowcoder.com/acm/contest/6/C来源:牛客网题目输入两个字符串A和B,合并成一个串C,属于A和B的字符在C中顺序保持不变.如"abc&q ...

  7. 【bzoj1706】[usaco2007 Nov]relays 奶牛接力跑

    题意 给出一张无向图,求出恰巧经过n条边的最短路. 题解 考虑先离散化,那么点的个数只会有202个最多.于是复杂度里面就可以有一个\(n^3\).考虑构造矩阵\(d^1\)表示经过一条边的最短路,那么 ...

  8. SpringBatch是什么?

    https://segmentfault.com/a/1190000016278038 <dependency> <groupId>org.springframework.bo ...

  9. 如何快速获取properties中的配置属性值

    本文为博主原创,未经博主允许,不得转载: 在项目中,经常需要将一些配置的常量信息放到properties文件中,这样在项目的配置变动的时候,只需要修改配置文件中 对应的配置常量即可. 在项目应用中,如 ...

  10. Java String 函数常用操作 & format() 格式化输出，代码详解

    package _String_; import java.util.*; import java.math.*; import java.lang.*; public class _Strings ...