有以下一段html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .triangle_up

{

  height:0px; width:0px;

  border-bottom:50px solid red;

  border-left:50px solid transparent  ;

  border-right:50px solid transparent  ;

}

    </style>

</head>

<body>

 <div class="triangle_up"></div>

</body>

</html>

乍一看非常不解，可是效果是这种：

把CSS改一改：

.triangle_up

{

  height:0px; width:0px;

  border-bottom:50px solid red;

  border-left:50px solid   ;

  border-right:50px solid   ;

}

还是晕，再把宽高改一改：

宽高再改一改：

瞬间恍然大悟。

块的宽高都为0。又巧妙设置了透明。所以看起来就是一个三角形！

HTML border CSS输出三角形的更多相关文章

  1. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  2. CSS绘制三角形—border法

    1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形:   CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...

  3. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  4. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  5. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  6. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  7. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  8. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  9. CSS实现三角形效果

    类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...

随机推荐

  1. nginx访问控制allow、deny（ngx_http_access_module）

    单看nginx模块名ngx_http_access_module,很多人一定很陌生,但是deny和allow相比没一个人不知道的,实际上deny和allow指令属于ngx_http_access_mo ...

  2. 节点流——FileReaderWriter

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileReader; import java.io ...

  3. [HAOI2011][bzoj2301] Problem b [莫比乌斯反演+容斥原理+分块前缀和优化]

    题面: 传送门 有洛谷就尽量放洛谷链接呗,界面友好一点 思路: 和HDU1695比较像,但是这一回有50000组数据,直接莫比乌斯反演慢慢加的话会T 先解决一个前置问题:怎么处理a,c不是1的情况? ...

  4. 嵌入式wifi iwconfig编译

    转载自:http://blog.sina.com.cn/s/blog_546ced060101cmru.html     移植wifi无线网卡到mini2440上全过程 前段时间移植了U-boot和l ...

  5. inline-block元素垂直对齐

    多个inline-block元素使用vertical-align:middle无法对齐,必须有个height:100%的子元素才行,通常使用伪元素.另一种方法是添加line-height:normal ...

  6. wooyun

    转自:http://zone.wooyun.org/content/19128 tencent.com baidu.com sina.com.cn sohu.com discuz.net rising ...

  7. 从零开始实现放置游戏（六）——实现挂机战斗（4）导入Excel数值配置

    前面我们已经实现了在后台管理系统中,对配置数据的增删查改.但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实.本章我们就实现通过Excel导入配置数据的功能.这里我们还是以地 ...

  8. js 清空div

    document.getElementById('BIGDraw').innerHTML = ""; $('#BIGDraw').html(""); $('#B ...

  9. JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证

    目录:  typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...

  10. 深海机器人（cogs 742）

    «问题描述:深海资源考察探险队的潜艇将到达深海的海底进行科学考察.潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动.深海机器人在移动中还必须沿途采集海底生物标本.沿途生物 ...