首頁 > web前端 > css教學 > 主體

純CSS繪製三角形(各種角度)_基礎教程

WBOY
發布: 2016-05-16 12:03:55
原創
1574 人瀏覽過

我們的網頁因為 CSS 而呈現千變萬化的風格。這看似簡單的樣式語言在使用上非常靈活,只要你發揮創意就能達到許多比人想像不到的效果。特別是隨著 CSS3 的廣泛使用,更多新奇的 CSS 作品湧現出來。

今天帶給大家CSS 三角形繪製方法
純CSS繪製三角形(各種角度)_基礎教程

複製程式碼 代碼如下:

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

純CSS繪製三角形(各種角度)_基礎教程

複製程式碼 程式碼如下:

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

純CSS繪製三角形(各種角度)_基礎教程

class="tijpg?201392994835">
s a style="max-width:90%" data="117" class="copybut" id="copybut117" onclick="doCopy('code117')">複製程式碼 代碼如下:

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

純CSS繪製三角形(各種角度)_基礎教程複製程式碼 代碼如下:


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

純CSS繪製三角形(各種角度)_基礎教程

class="tijpg?201392994926">
s a style="max-width:90%" data="21076" class="copybut" id="copybut21076" onclick="doCopy('code21076')">複製程式碼 代碼如下:

#triangle-topleft {
    寬度: 0;
    高度: 0;
  像素純紅色;
    右邊框:100 像素純透明;
}

純CSS繪製三角形(各種角度)_基礎教程

class="tijpg?201392994948">
s a style="max-width:90%" data="3322" class="copybut" id="copybut3322" onclick="doCopy('code3322')">複製程式碼 代碼如下:

#triangle-topright {
    寬度: 0;
    高度: 0;
   純紅色;
    左邊框:100px 純透明;
}

純CSS繪製三角形(各種角度)_基礎教程

複製程式碼 代碼如下:

#triangle-bottomleft {
    寬度: 0;
    高度: 0;
    像素純紅色;
    右邊框:100 像素純透明;
}

純CSS繪製三角形(各種角度)_基礎教程

class="tijpg?201392995028">
s a style="max-width:90%" data="49915" class="copybut" id="copybut49915" onclick="doCopy('code49915')">複製程式碼 代碼如下:

#triangle-bottomright {
    寬度: 0;
    高度: 0;
  像素純紅色;
    左邊框:100 像素純透明;
}




相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!