代碼如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <title>用CSS畫一個三角形</title>
  6.     <style>
  7.         #triangle {
  8.             width:0;height:0;
  9.             border-top:100px solid green;
  10.             border-right:100px solid red;
  11.             border-bottom:100px solid black;
  12.             border-left:100px solid blue;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18.     <div id='triangle'></div>
  19. </body>
  20. </html>

效果如圖：

幾個注意：div寬度，高度分別爲0，而div邊框的寬度設定，這時可以看到四個三角形，那麼我們要取哪一個三角形，就需要讓其他三角的邊框的顏色爲透明？

爲什麼是透明，而不是白色呢？？

因爲如果是白色，而三角型所在的區域同時又有背景色，那麼在三角型的區域就會把背景顏色覆蓋。

如下圖：

三角形白色部分把背景顏色覆蓋了！Error!

那麼如何讓邊框變透明呢？？

答案就是border-color屬性中的默認值：transparent

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <title>用CSS畫一個三角形</title>
  6.     <style>
  7.         div.bg {
  8.             background-color:maroon;
  9.             height:500px;
  10.         }
  11.         #triangle {
  12.             width:0;height:0;
  13.             border-top:100px solid transparent;
  14.             border-right:100px solid transparent;
  15.             border-bottom:100px solid black;
  16.             border-left:100px solid transparent;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.  
  22.     <div class='bg'>
  23.         <div id='triangle'></div>
  24.     </div>
  25. </body>
  26. </html>

效果如圖：

三角形成功出現，現在可以做一個模型了，比如tips,warnings.

　　

HTML: 用CSS畫一個三角形的更多相关文章

  1. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. 用css做出来一个三角形

    用css做出来一个三角形      <!--不设置宽高  转换行内块  边线设置成宽度-->       <div class="triangle"> 三角 ...

  3. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  4. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  5. CSS和字符串实现三角形

    听说是百度校招的题目,就写了一下 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  6. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  7. css实现的透明三角形

    css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题): <div id="demo"></div>   分析:这 ...

  8. CSS效果：CSS实用技巧制作三角形以及箭头效果

    实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...

  9. 用CSS来画空心三角形的方法

    画这里三角形的方法: 用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:befo ...

随机推荐

  1. Android读书笔记0-从零开始

    可以有千万个理由,但是结果就在这里,我开始对Android产生兴趣,于是决定学点啥.啥都不说,单刀入正题. 开发环境 啥都不说,直接上图. 只说Windows平台上,下载完直接解压即可.比起VS安装过 ...

  2. （二）WebRTC手记之框架与接口

    转自:http://www.cnblogs.com/fangkm/p/4370492.html 转载请注明出处:http://www.cnblogs.com/fangkm/p/4370492.html ...

  3. 关于setTimeout的妙用前端函数节流

    最近在某团队忙于一个项目,有这么一个页面,采用传统模式开发(吐槽它为什么不用React),它的DOM操作比较多,然后性能是比较差的,尤其当你缩放窗口时,可怕的事情发生了,出现了卡顿,甚至浏览器瘫痪.为 ...

  4. 布局文件中fill_parent、match_parent和wrap_content有什么区别？

    fill_parent 宽度或者高度 布满整个屏幕从Android 2.2开始fill_parent改名为match_parent.wrap_content布局元素将根据内容更改大小.

  5. 2016"百度之星" - 初赛（Astar Round2A） 1004 D Game 区间DP

    D Game Problem Description   众所周知,度度熊喜欢的字符只有两个:B 和D. 今天,它发明了一个游戏:D游戏. 度度熊的英文并不是很高明,所以这里的D,没什么高深的含义,只 ...

  6. loj 1063(求割点个数)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26780 思路:判断一个点是否是割点的两个条件:1.如果一个点v是根 ...

  7. win7下loadrunner创建mysql数据库参数化问题解决

    问题现象: 安装mysql数据源驱动后,lr创建mysql驱动程序列表没有安装的驱动程序: 安装完mysql ODBC数据源后 2.在控制面板-数据源(ODBC) 3.创建mysql数据源: 4.从l ...

  8. Selenium测试规划

    开源工具经过近几年的发展,已经出现了一大批成熟的可应用到实际项目中的产品,其中,在WEB自动化测试领域,Selenium支持广泛的浏览器和脚本开发语言,高效的执行效率,获得广泛的应用. 本课程结合Se ...

  9. 错误3 error C3859: 超过了 PCH 的虚拟内存范围；请使用“-Zm120”

    在工程上单击右键,属性,C/C++,最后一项,命令行,在里面/Zm200或者编译器提示的大小解决.

  10. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...