如何CSS三角形：最方便的方式

很多時候，美麗的現代化的網頁包含很多有吸引力的圖形。 其中最簡單的使用這種幾何形狀為三角形，其被用於設計多個元件。 例如，它們被用作一個指向對象在頁面上的訪問者將注意力轉向了他。 當然，三角形的主要功能 - 一種裝飾，作為包含它們的塊，變得更加現代和有吸引力。

不是每個人都知道如何通過層疊樣式表創建一個這樣的人物，想知道如何在CSS一個三角形。

在網站設計中的應用

在網頁設計的三角形隨處可見。 他們是做出來的技巧，菜單，各種UI元素。 有時它們被用來創建引導過程的一個指標。 如果以前它是可能沒有他們做的，但現在是不可能的，開發商有義務適應這種要求。 畢竟，今天在CSS三角形創建 - 一個重要組成部分，在互連的接口部分之間的結構和合併成一個單一的實體。

許多網站設計者都感到困惑，當涉及到佈局，其設計是很經常的三角形。 畢竟，沒有屬性會直接創建幾何圖形。 事實上，有多種方法來做到這一點。

使用創建幀的方法

第一種方法允許你創建的CSS三角形 - 邊界。 他使用了框架。 儘管正在使用border屬性產生的邊界不直接相關的三角形，這是最常用於這一目的。

當設置零高度和對象的寬度，以及一個粗邊框的安裝，可以看到正方形，其被劃分成四個相等的三角形。 訣竅是，你只需要保留必要的邊界，和其他人進行透明。 而現在，原來在CSS正確的方向和顏色繪製三角形。

使用屬性創建“幀”是方便的角度，因為沒有必要繪製使用任何編輯圖片。 三角形參數總是可以在代碼被改變。 它可以節省時間開發。 通過組合框的寬度不同，很容易夠得著的身影。 要了解它是如何工作的，你可以簡單地創建具有零寬度，高度空元素，而且很粗框不同的顏色，每邊。 因此，使得四個透明三角形的三條邊是不同的類型：

• 三角形，找到左側時，兩面分別相等;
• 三角形，向左看和扁平;
• 細長的三角形，朝左;
• 直角三角形， 其從左到右角度;
• 三角形向下看;
• 三角仰視;
• 三角形，向右看，和其他許多物種。

使用psevdoedementov

有了這些技術，你可以創建在彈出的說明和提示的角度。 要通過CSS三角形連接到單位，大多是程序員使用諸如偽之後和之前。 如果你使用它們放在一起，可以在具有中風的CSS三角形繪製。

通過結合他們的開發人員創建了各種美麗的射手，應用屬性位置：相對父元素。 這是為了做偽不搬出自己的座位。

加上用於創建三角形使用CSS框架是：

• 大小和顏色與性質的幫助下快速簡單的編輯;
• 支持所有瀏覽器。

缺點：

• 因為它使用了幀，則不可能施加梯度，陰影;
• 有時，當用戶查看Firefox瀏覽器的頁面，阿爾法值可能無法正常工作，這將扭曲的形象。

利用現成的圖片

創建三角形的以下方法 - 是利用編碼圖像的。 三角形預先描繪的圖像編輯器，並轉換成與專業服務的特殊代碼。

這種方法的好處是，你可以做一個非常漂亮的設計，陰影，漸變和框架，然後只編碼這一切。 但不足之處是，不是每個人都精通圖形程序。 此外，如果圖像是非常大的，通過簡單地獲得巨大的代碼行。 這是不方便的開發商。

一個單獨的項目值得使用的瀏覽器Internert Explorer的舊版本。 在他們的方法根本不起作用。

法方倒

一種方法是創建CSS倒方的手段。 有兩個基本單元。 但有些人使用假。

首先，創建一個正方形。 這將是旋轉部件的內容。 然後，通過45度，部署它，這樣它看起來像一顆鑽石。 接著，升檔和一個外部單元由屬性溢出隱藏：隱藏。 此解決方案也不是一個跨瀏覽器，有時根據需要不顯示圖像。

結果

因此，有許多方法來創建一個三角形。 只有它不會迷失在所有這些CSS屬性？ 參考在這種情況下，總是會有所幫助。 它描述了層疊樣式表的所有功能。

對於那些誰不想進入編程，並查看CSS-引導，有產生三角形權的大小和顏色的在線編輯器。 在 可視化編輯器， 用戶選擇和配置所有設置的身影。 轉換為放置在一個單獨的窗口上飛CSS代碼生成三角形。 然後，產生的代碼被簡單地插入到樣式表，並以適合頁面的設計。