普陀总校  北桥教学点  颛桥教学点  泗泾教学点  | 设为首页 | 加入收藏 | 官方微信
内威培训
打造“培训+就业”一站式服务品牌!
  • Web前端工程师
  • 电脑艺术设计师
  • 网页设计制作员
  • Java软件开发工程师
banner1

首页>>学员天地

css+div绘制三角形
编辑:eamol  阅读:486次  发布:17-03-04


--文档脚本:
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>绘制三角形</title> 
      <style type="text/css"> 
          .div1{ 
              width: 100px; 
              height: 100px; 
              background-color: red; 
              border-top: 50px solid bisque; 
              border-right: 50px solid cadetblue; 
              border-bottom: 50px solid magenta; 
              border-left: 50px solid aquamarine; 
          } 
          .div2{ 
              width: 0px; 
              height: 0px; 
              background-color: red; 
              border-top: 50px solid bisque; 
              border-right: 50px solid cadetblue; 
              border-bottom: 50px solid magenta; 
              border-left: 50px solid aquamarine; 
          } 

          .div3 { 
              width: 0px; 
              height: 0px; 
             border-width: 50px 50px  50px 50px ; 
              border-color: purple transparent; 
              border-style: solid; 
          } 
          .div4 { 
                   width: 0px; 
                   height: 0px; 
                   border-width:50px 50px  0px 50px ; 
                   border-color: purple transparent; 
                   border-style: solid; 
               } 
      </style> 
     
</head> 
<body> 
      <h3>三角形</h3> 

      <h3>第一步</h3> 
<div class="div1"> 
</div> 

      <h3>第二步</h3> 
<div class="div2"> 
</div> 

      <h3>第三步</h3> 
      <div class="div3"> 
      </div> 

      <h3>第四步</h3> 
      <div class="div4"> 
      </div> 

</body> 
</html>

--效果如下:

代码效果截图



上一篇: 解决span float:right不能右对齐而是换行显示   下一篇: 没有了
网络大专、自考本科,学历轻松拿!
©2016-2020 万博体育APP 版权所有
普陀区武宁路1500号中楼2-3层(邮编:200062)
咨询:021-62434966  合作:021-13371929650  就业:021-62434966  传真:021-52662428  电邮:service@snetway.com
《中华人民共和国电信与信息服务业务》经营许可证沪ICP备15002602号