<tr id="ublig"><code id="ublig"><delect id="ublig"></delect></code></tr>
  • <noframes id="ublig"></noframes>
    1. <output id="ublig"></output>

    2. <mark id="ublig"><rp id="ublig"></rp></mark>

      <sup id="ublig"></sup>

      純 CSS 實現繪制各種三角形(各種角度)

      發布日期:2021年01月05日 瀏覽次數:11451 CSS

      一、前言

      三角形實現原理:寬度width為0;height為0;(1)有一條橫豎邊(上下左右)的設置為border-方向:長度 solid red,這個畫的就是底部的直線。其他邊使用border-方向:長度 solid transparent。(2)有兩個橫豎邊(上下左右)的設置,若斜邊是在三角形的右邊,這時候設置top或bottom的直線,和右邊的斜線。若斜邊是在三角形的左邊,這時候設置top或bottom的直線,和左邊的斜線。

       

      二、實現

      2.1 Triangle Up


      #triangle-up {    width: 0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 100px solid red;
      }

       

      2.2 Triangle Down

      #triangle-down {    width: 0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-top: 100px solid red;
      }

       

      2.3 Triangle Left

      #triangle-left {    width: 0;
          height: 0;
          border-top: 50px solid transparent;
          border-right: 100px solid red;
          border-bottom: 50px solid transparent;
      }

       

      2.4 Triangle Right

      #triangle-right {    width: 0;
          height: 0;
          border-top: 50px solid transparent;
          border-left: 100px solid red;
          border-bottom: 50px solid transparent;
      }

       

      2.5 Triangle Top Left

      #triangle-topleft {    width: 0;
          height: 0;
          border-top: 100px solid red;
          border-right: 100px solid transparent;
      }

       

      2.6 Triangle Top Right

      #triangle-topright {    width: 0;
          height: 0;
          border-top: 100px solid red;
          border-left: 100px solid transparent;
       
      }

       

      2.7 Triangle Bottom Left

      #triangle-bottomleft {    width: 0;
          height: 0;
          border-bottom: 100px solid red;
          border-right: 100px solid transparent;
      }

       

      2.8 Triangle Bottom Right

      #triangle-bottomright {    width: 0;
          height: 0;
          border-bottom: 100px solid red;
          border-left: 100px solid transparent;
      }

       

      2.9 繪制大于號">"的各種方向

       .dayuhao-xia {
          display: inline-block !important;
          vertical-align: middle;
          border-right: 1px solid #f00;
          border-bottom: 1px solid #f00;
          width: .15rem;
          height: .15rem;
          transform: rotate(45deg);
          margin: 0 0 .05rem .18rem;
      }




      延伸閱讀

      微信小程序各種圖表繪制

      在做應用系統開發的時候,我們經常需要繪制各種統計圖表。如何做呢?這篇文章給你一個思路參考。

      初識 客戶端js DDOS攻防

      我們將從"攻"和"防"兩方面與您一同梳理JavaScript DDoS: 攻擊:攻擊者如何通過惡意地址、服務器劫持、中間人等手段來實施DDoS攻擊。 防御:網站如何使用HTTPS和SRI(Subresource Integrity)等手段來避免攻擊。

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      百度編輯器上傳圖片能自動裁切圖片大小嗎? 這個我暫時不知道,不過作為應急辦法,可以暫時先設置圖片的最大寬度。如果哪位網友知道如何通過百度編輯器自動裁切壓縮圖片大小請告知,不勝感激。

      跨域資源共享 CORS 詳解

      CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。

      mysql 字符串截取

      數據庫開發過程中常用的字符串截取操作。

      dragsort:支持拖動排序js前端組建

      前端js拖拽排序組建, 看起來不錯. 收藏了.

      css選中子元素中不是第一個元素的3種方法

      前端開發中經常需要設置非第一個元素之外的樣式,這篇文章做一個總結. 需要的小伙伴歡迎查閱和分享.

      純 CSS 實現繪制各種三角形(各種角度)

      用CSS繪制三角形,這在前端開發過程中是比較常見的. 以前都是使用圖片代替, 當你看到這篇文章之后,也許以后遇到類似需求,就告別PS了.

      面向個體戶與個人的賬目小程序上線

      重點推薦給個體戶,個人家庭,個人合租用戶,臨時項目辦事等使用.用完即走,不轉內存, 可以多人合作記賬. AA記賬自動分賬. 單獨設置每個用戶的權限等非常實用的功能,大家合租的記賬隨時知道,統計功能也很強大,最重要是用起來很簡單,沒其他記賬產品那么復雜。

      廣西空中課堂在小程序發布視頻點播課

      覆蓋小學、初中、高中的12個年級的廣西中小學生“空中課堂”線上課程正式推出,而課堂小編輯選擇本公司小程序平臺發布,方便家中無法收視電視的同學方便使用手機端點播學習。
      亚洲综合憿情五月丁香五月网