<menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    學校總部  | 設為首頁 | 加入收藏 | 官方微信
    內威培訓
    打造“培訓+就業”一站式服務品牌!
    banner1
    • Python+AI工程師
    • Web前端工程師
    • Java軟件開發工程師

    首頁>>學員天地

    css+div繪制三角形
    編輯:eamol  閱讀:1545次  發布: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 上海內威職業技能培訓學校 版權所有
    普陀區武寧路1500號中樓2-3層(郵編:200062)
    咨詢:021-62434966  合作:021-13371929650  就業:021-62434966  傳真:  電郵:service@snetway.com
    《中華人民共和國電信與信息服務業務》經營許可證滬ICP備15002602號 
    <menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    本溪娱网棋牌