2018-05-23

CSS制作三角形

你沒(méi)看錯(cuò),我也只是一個(gè)菜菜鳥(niǎo),讓我們記錄一起做一個(gè)三角形吧!

HTML測(cè)試代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Test triangle</h1>
<div class="triangel"></div>
</body>
</html>

Css測(cè)試代碼

.triangel{
  width: 30px;
  height: 30px;
  border-top: 30px solid red;
  border-right: 30px solid orange;
  border-left: 30px solid blue;
  border-bottom: 30px solid black;
}
a1.PNG

從小就學(xué)過(guò)四邊形是由多個(gè)三角形組成的,這個(gè)大道理是時(shí)候派上用場(chǎng)了....畢竟玩了那么多年的7巧板...


a2.PNG
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 姓名何迎濤 企業(yè)名稱(chēng):臨沂鑫源研磨新材料有限公司 組別:第373期 利他1組 【日精進(jìn)打卡第37天】 ...
    何迎濤閱讀 376評(píng)論 0 0
  • (一)調(diào)查研究,分析錯(cuò)因。 通過(guò)對(duì)學(xué)生計(jì)算能力的調(diào)查問(wèn)卷研究,結(jié)合我們實(shí)際教學(xué)的觀察發(fā)現(xiàn),我們認(rèn)真分析了學(xué)生計(jì)算錯(cuò)...
    晴空00閱讀 482評(píng)論 0 0
  • Android之Activity測(cè)試其生命周期(簡(jiǎn)單程序) 1、Activity及其子類(lèi) ??要測(cè)試Activit...
    17wwshe閱讀 306評(píng)論 0 0
  • 創(chuàng)業(yè)-是一個(gè)讓人憧憬又懼怕的行為!特別是對(duì)剛出家門(mén)或校門(mén)的年輕人來(lái)說(shuō)更是一道分岔路口,讓人不知該如何選擇! 其實(shí)關(guān)...
    恩澤666閱讀 810評(píng)論 0 1
  • 半個(gè)月前才在國(guó)內(nèi)上映的電影《LaLa Land》(《愛(ài)樂(lè)之城》)引發(fā)了不小的轟動(dòng),這部融合了音樂(lè)與舞蹈的歌舞電影榮...
    印度通閱讀 1,576評(píng)論 0 0

友情鏈接更多精彩內(nèi)容