趣知科普吧
網站首頁 學習教育 IT科技 金融知識 旅遊規劃 生活小知識 家鄉美食 養生小知識 健身運動 美容百科 遊戲知識 綜合知識
當前位置：趣知科普吧 > 綜合知識 > 

css三角形怎麼寫

欄目: 綜合知識 / 發佈於: / 人氣:7.56K
1.如何用CSS寫一個三角形

1.可以用css3的border-radius屬性來實現，支援ie9+

css三角形怎麼寫

<div class="dm">

</div>

<div class="dm1">

</div>

<div class="dm2">

</div>

<div class="dm3">

</div>

<div class="dm4">

</div>

<div class="dm5">

</div>

<div class="dm6">

</div>

<div class="dm7">

</div>

<style>

.dm {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #00897B;

}

.dm1{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #00897B;margin-top: 20px;

}

.dm2{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm3{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm4{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-right: 100px solid transparent;margin-top: 20px;

}

.dm5{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-left: 100px solid transparent; margin-top: 20px;

}

.dm6{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-right: 100px solid transparent

}

.dm7{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-left: 100px solid transparent;

}

</style>

2.利用CSS怎樣寫出三角形

#bottom{ width:0px; height:0px; border-left:30px solid #FFFFFF; border-top:30px #FF6699 solid; border-right:30px solid #FFFFFF; } #top{ width:0px; height:0px; border-left:30px solid #FFFFFF; border-bottom:30px #FF6699 solid; border-right:30px solid #FFFFFF; } #rt{ width:0px; height:0px; border-left:30px solid #FFffff; border-bottom:30px #ff6699 solid; } #lt{ width:0px; height:0px; border-right:30px #FFffff solid; border-bottom:30px solid #FF0000； } 下 上 右下 左下。

3.如何用CSS寫一個三角形

1.可以用css3的border-radius屬性來實現，支援ie9+ <style> .dm { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #00897B;}.dm1{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #00897B;margin-top: 20px;}.dm2{ width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm3{ width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm4{ width: 0; height: 0; border-top: 100px solid #00897B; border-right: 100px solid transparent;margin-top: 20px;}.dm5{ width: 0; height: 0; border-top: 100px solid #00897B; border-left: 100px solid transparent; margin-top: 20px;}.dm6{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-right: 100px solid transparent}.dm7{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-left: 100px solid transparent;}</style>。

4.怎樣用html或css製作三角形

希望可以幫到樓主，下面是實現的代碼：

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

HTML代碼：

<div id="trlangle-up></div>

希望我的回答對樓主有幫助，不懂可以繼續追問。

5.如何使用HTML&CSS寫一個三角形

<div style="width:200px; text-align:center; color:#fff; background-color:red;">；等邊三角形</div>

<div style="width:200px; text-align:center; color:#fff; background-color:red;">；等腰直角三角形</div>

6.利用CSS怎樣寫出三角形利用CSS+DIV怎樣寫

<meta charset="utf-8">無標題<a href="https://qzkpb.com/tags-200p-0.html" title="檢視更多文檔的文章" target="_blank" >文檔</a><style>.a{ border-bottom:1px solid #aaa; height:50px; width:100px; position:relative; overflow:hidden;}.b{ position:absolute; display:block; top:0px; left:0px; width:100px; height:50px;}.b i,.b em{ position:absolute; left:0px; bottom:0px; border-color:transparent; border-color:rgba(255,255,255,0); border-style:solid; border-width:0 50px 50px 50px;}.b i{ border-bottom-color:#aaa;}.b em{ border-bottom-color:#FFF; bottom:-1px;}.text{ position:absolute; bottom:10px; background:none; border:none; outline:none; text-align:center; width:100%;}</style><body> 。

7.css3怎樣做一個這樣的三角形,寫一下

用線性濾鏡就行 background: linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -o-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -moz-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -webkit-linear-gradient(135deg,rgba(0,0,0,0) 34px,red。

8.怎麼利用CSS3繪製三角形

1、新建一個html5網頁，名稱爲index.html，在<body>；代碼中寫上四個div，分別是向上、向下、向左，向右四個三角形，代碼如下：

<div class="triangle-up"> <；！--向上的三角--> </div>

<div class="triangle-down"> <；！--向下的三角--> </div>

<div class="triangle-left"> <；！--向左的三角--> </div>

<div class="triangle-right"> <；！--向右的三角--> </div>

2、然後新建一個css檔案style.css，並在index.html中引入，引入代碼：<link rel="stylesheet" type="text/css" href="style.css">

3、先做向上的三角形，這裏有兩種寫法，大家可以參考下。在css檔案中輸入以下代碼：

第一種： .triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

第二種：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

}

4、接下來寫向下的三角形，繼續在css檔案中輸入以下代碼：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

5、然後是向左的三角形，代碼爲：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

6、最後是向右的三角形，代碼爲：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

Tags：css
猜你喜歡
夢到三角形 直角三角直角梯形怎麼畫 怎麼算直角三角形斜邊 三角形的內角是什麼|什麼叫三角形的內角 cdr三角形怎麼圓角 怎麼求三角形的第三個角 直角梯形怎麼畫|直角三角直角梯形怎麼畫 三個角相等是什麼三角形 三角形介紹 三角形六心
相關文章
三角形三邊公式 三角形糉子怎麼包 豆腐三角形怎麼做 怎麼切西瓜三角形 豆腐怎麼切三角形 三角形西瓜怎麼切 什麼叫三角形的內角 三角形豆腐怎麼切 怎麼切三角形豆腐 三角形邊長怎麼算
熱門文章
什麼是三角形數 直角三角形全等的判定|直角三角形全等如何判定 直角三角形中位線定理|直角三角形中位線定理是什麼 直角三角形的面積怎麼算 cdr怎麼把三角形的角變圓 三角形的周長 翡翠三角形料做什麼|翡翠三角形料做啥 怎樣求三角形的第三邊 三角形豆腐片怎麼切 三角形數是什麼 三個角相等是等邊三角形嗎 三角形的介紹 cdr三角形如何變圓角 怎樣計算三角形的角度 什麼是正三角形
熱門搜尋
夫子自道 長跪 鬼斧神工 棗紅馬 初期的話沒有弓與箭 遊戲公會 濾材 王土 2win10 lbs 褲會 偷蛋 cfdisk 心癮 鱷龍 五十六個 開除公職 世界會變得更加和諧 移門 鳳死 姜雲 frostbite 水養洋 jerry 近來可好 如蓋 傷城 人民日報 改增 我們有所感知 識聖顏 好教 茶菊有 全異 路亞前 originos 做文 被關 假面舞會 生仁 火讀 六年級作文 命令代碼 打閃 課稅 赳赳 botlm 歌唱祖國
推薦內容
三角形糉子是怎麼包 三角形的豆腐怎麼切 直角三角形斜邊怎麼算 老豆腐怎麼切三角形 怎麼證明全等三角形 怎麼計算三角形面積 白豆腐怎麼切三角形 三角形的糉子怎麼包 全等三角形怎麼判定 三角形符號△怎麼打出？ 三角形風箏怎麼穿線 切三角形豆腐怎麼切 糉子的三角形怎麼包 什麼三角形叫銳角三角形 直角三角形斜邊怎麼算 怎麼算直角三角形斜邊 豆腐怎麼切成三角形 全等三角形怎麼證明 AI裏怎麼畫圓角三角形 等腰直角三角形有幾條對稱軸 怎麼切三角形的豆腐
最近更新
  • 儲存錐慄的方法
  • 怎樣可以把手機上的視頻投屏到電視機上
  • 夢到吃雞
  • 佳能77d與80d的區別
  • 手機上有病毒怎麼清理
  • 給教師的一百條建議讀後感
  • 微信怎麼轉賬|微信錢包裏有零錢發給別人就顯示餘額不足
  • 是大老鼠|豪豬是豬嗎
  • 如何把豎屏視頻變橫屏
  • 清洗浴缸怎麼做
  • 給自己的店鋪取個好名字
  • 手機怎樣改差評
  • 熨燙衣服的技巧有哪些
  • 茉莉花是怎樣澆水的
  • 夢到找不到回家的路是什麼意思
    • 趣知科普吧 - 生活小竅門，體育運動，飲食養生，科普趣味生活知識
    Copyright © 2024 趣知科普吧 All Rights Reserved.