2. 程式人生 > 其它 >[Css] 繪製三角形

[Css] 繪製三角形

阿新 • • 發佈：2021-02-11

技術標籤：Css

目錄




Ps: 規律自己找

1. Css 實現正三角

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name=
 
"viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
 

    }
  </style>
</head>

<body>
  <div class="triangle"></div>
</body>

</html>

2. Css 實現倒三角

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
 
 content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
    }
  </style>
</head>

<body>
  <div class="triangle"></div>
</body>

</html>

3. 左上直角三角

左下，右下，右上就不寫了

相關推薦

CSS繪製三角形和箭頭

<html> <head> <meta charset=\"utf-8\"> <title>CSS繪製三角形和箭頭</title>

純CSS繪製三角形

三角形屬於常見的幾何圖形，在網頁設計中應用較為廣泛。在網頁程式設計中除了採用圖片來實現前端展現外，純CSS也可以實現三角形繪製。

[Css] 繪製三角形

技術標籤：Css 目錄 1. Css 實現正三角2. Css 實現倒三角3. 左上直角三角4. 實現氣泡對話方塊效果

css 繪製三角形和斜邊

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

如何使用css繪製三角形

背景 用迪卡儂官方主頁進行頁面練習，發現頭部導航欄需要使用到梯形 分析 圖形分解

純CSS繪製不同角度的三角形

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

css用border來繪製三角形

技術標籤：csscss div { width: 0; height: 0; border: 72px solid; border-color: transparent transparent transparent orange;

使用css偽類元素做動畫效果以及彈框缺角效果,繪製三角形

1、css動畫效果(使用了css屬性: --line-index) <ul class=\"loading\"><li v-for=\"item in 5\" :key=\"item\":style=\"{\'--line-index\':item}\"></li></ul>//css樣式.loading{display:f

如何通過CSS樣式繪製三角形，0基礎學前端專案案例開發之HMTL+CSS專案實戰系列

各位同學們大家好，近期為大家開設一個系列的實戰課程，通過HMTL5+CSS3做網際網路大廠常用的實戰案例，當你學會之後，您就可以組合成為一個網站專案了！

css3 純css實現繪製三角形、箭頭效果

在前端工作中遇到三角形或者需要箭頭的樣式，我們不僅可以利用圖片來實現效果，還可以利用css來實現。

CSS簡筆畫：純CSS繪製一艘郵輪

<div class=\"ship\"><div class=\"ship-body\"></div></div> :root{--seaColor:#54a0ff;--lineColor: #fff;--enclosureColor: #000;}body {width: 100%;height: 100vh;}.ship{position: a

css鏤空三角形樣式

前言 對話方塊----鏤空三角形樣式 原理 1)利用偽元素 :before :after 2):before ,border做出大三角形樣式

css畫三角形

轉載：http://www.mamicode.com/info-detail-1534066.html .sanjiao{ width:0px; height:0px; overflow:hidden;

WebGL繪製三角形

<!-- * @Author: 蘋果園dog * @Date: 2020-11-20 15:42:15 * @LastEditTime: 2020-11-20 17:34:46 * @LastEditors: Please set LastEditors

通過CSS繪製五星紅旗

任務要求： 1、建立一個div作為紅旗旗面，用CSS控制其比例寬高比為3:2，背景為紅色。

CSS繪製正五角星原理（數學模型）

儘管網上有很多CSS繪製五角星的程式碼案例，但是對於初學者來說可以拿來移植使用，但是在不明白其原理的情況下，進行修改移植就比較困難了。譬如想要將五角星尺寸進行縮小或者放大等設計，就需要對原始碼相關資料進行

純css 實現三角形fold - unfold效果

技術標籤：vueelement-UIhtmlcss 滑鼠未懸浮 滑鼠懸浮 程式碼 html 部分 <div class="nav-box nav-item align-center flex nav-dropDown" @mouseleave="isHoverDropNav=false;" @mouse

CSS實現三角形原理及過程

技術標籤：前端css CSS實現三角形原理及過程 在開發中，遇到很多的列表都需要用到三角形的箭頭，可以直接用一個圖片作背景鋪墊，但這樣佔用一定的記憶體，對於這種簡單的圖形純CSS也能實現，它佔用的記憶體相對圖

css實現三角形（上下左右）@莫成塵

技術標籤：前端csscsscss3前端 先看程式碼，複製使用即可，以下程式碼均可複製貼上使用（我將以註釋的形式解釋程式碼左右，您將看到以下效果）。

通過數學模型CSS繪製捷克國旗

按照要求捷克國旗： 1、捷克國旗呈長方形，長寬之比為3：2。旗面由藍、白、紅三色組成。