|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 CSS中的屬性非常神奇,它可以制作很多我們意想不到的圖形。這篇文章主要想和大家分享如何用CSS制作一個三角形,感興趣的朋友可以參考一下,希望對你有所幫助。首先我們新建一個100x100的正方形div,為了方便我們查看,設置一個背景顏色。 css代碼如下: width: 100px; height: 100px; background-color: #333; 接著給這個div添加兩個border, width: 100px; height: 100px; background-color: #333; border-left:50px solid red; border-bottom: 50px solid blue; 效果圖如下:
是不是感覺很神奇,為什么會這樣呢?在上面我們分別為這個div添加了50像素的左邊框和下邊框,在div左下角瀏覽器智能的將這兩種顏色平分了,上面是左邊邊框的紅色,下面是下面邊框的藍色。看到這里你可能疑惑了,不是要實現一個三角形嗎?怎么讓我設置邊框呢?別著急,我們接著再添加上面和右面兩個邊框。 width: 100px; height: 100px; background-color: #333; border-left:50px solid red; border-bottom: 50px solid blue; border-right:50px solid green; border-top:50px solid yellow; 效果:
到這里你是不是已經明白了,我們接著把這個div的寬高設為0px,再看效果
哈哈,出來了四個三角形,你想要哪個,只需要把其他三個的邊框顏色設為透明就可以了。比如我想要下面的藍色的三角形,css代碼如下: width: 0px; height: 0px; border-left:50px solid transparent; border-bottom: 50px solid blue; border-right:50px solid transparent; border-top:50px solid transparent; 最終我們想要的三角形就出來了。
以上就是如何用CSS制作一個三角形(附代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!