巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

用CSS3绘制三角形的简略体例

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:58 阅读数: 138

    操纵CSS的border和它的属性值transparent来完成三角形,此中最首要的是要大白因为div的高度跟宽度都为0,margin,padding也为0,以是元素框的巨细便是他的border的叠加,因为相邻boder会堆叠,故存在内容宽高时实在肆意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的色彩设置为transparent表现边框通明,而将右侧框色彩再设置为白色就发明三角形显现了,实在这个三角形是右侧框。

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

    图解

    一般的框模子,div的内容width和height均为50px.黑线划出来的地区便是它的右侧框,显现为一个梯形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width50px;    
  7.             height50px;   
  8.             border100px solid red;    
  9.             border-bottom100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

    当div的内容width和height均为0.黑线划出来的地区便是它的右侧框,显现为一个三角形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid red;    
  9.          }   
  10.     </style>   
  11.     <div id="triangle-up"></div>   
  12. </body>   
  13. </html>  

    当div的内容width和height均为0.高低左侧框都为通明的时辰,只要右侧框显现为白色,三角形就看到了

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

连系css其余特点定能做出更风趣的一些结果!

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

18
04月
乐视视频借力开源手艺处置大数据的经历分享

从年末破百亿的“芈月传”和有毒的“太子妃”到年头告发快播的“背锅侠”... >>概况

30
03月
教导机构的微信公家号为甚么挑选托管?

简介:说到微信公家号,信任都不目生。良多企业就捉住如许的机缘,教导行业也不破例,都想经由过程微信平台的影响利巴买卖越做越大!那为甚么黉舍、教导机... >>概况

27
03月
二季度手机市场份额排名,苹果沦为“其余”?!

简介:市场调研机构Canalys克日发布了2018年第二季度中国智妙手机市场的份额。二季度,中国手机市场全体出货量在1亿台以上,较第一季度的... >>概况

26
03月
MySQL 每秒57万的写入,带你飞呀!

简介:作者:吴炳锡;来历:http://yq.aliyun.com/articles/278034一、需要一个伴侣接到一个需要,从大数据平... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751