div+CSS實現三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 0; height: 0; border-bottom: 10px solid white; border-top: 10px solid red; border-left: 10px solid white; border-right: 10px solid white; } </style> </head> <body> <div></div> </body> </html>
只要將其他邊的顏色設定為白色,就可以實現三角形
border-top:朝下的三角形
border-bottom:朝上的三角形
border-left:朝右的三角形
border-right:朝左的三角形
相關推薦
div+CSS實現三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style t
DIV+CSS實現兩邊固定寬度,中間自適應寬度
round gin itl lan enter color css 寬度 自適應 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
網站註冊界面(div+css實現)
網站註冊界面(div+css實現)<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚網登錄</title><style type="te
網站購物車界面(div+css實現)
網站購物車界面(div+css實現)<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚網購物車</title><style type="
網站登錄界面(div+css實現)
網站登錄界面(div+css實現)<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚網登錄</title><style type="te
網站首頁(div+css實現)
簡單購物網站(div+css實現<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚網首頁</title>
DIV+CSS實現仿京東商城導航條效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xml
css實現三角形
首先我們新建一個100x100的正方形div,為了方便我們檢視,設定一個背景顏色。 css程式碼如下: width: 100px; height: 100px; background-color
HTML用DIV/CSS實現下拉列表
HTML程式碼: <body> <div class="title" > <h1>SYROS</h1> <ul> <li><a href="">HOME<
純 CSS 實現三角形尖角箭頭的例項
上次無意中發現了個使用純 CSS 實現三角形尖角箭頭的方法 ,但沒有怎麼用上,也沒有詳細完整的例項,今天剛好要用上,整理了下,寫個完整的程式碼: <!DOCTYPE html PUBLIC "
div + css 實現表格
一、 div + css 實現的表格,相比於table標籤,有如下優點: 1. 提高頁面瀏覽速度。不再需要,在每一列,逐行比對列寬,看誰最寬就用誰的寬度; 在每一行裡,逐列比對行高,看誰最高,就用誰的高度。 2. 結構清晰,樣式和內容相分離,更好地控制頁面佈局、字型,
CSS 實現三角形對話方塊
<div style=" margin-top: 100px;width: 300px;height: 300px;position: relative;border: 1px solid #000000"> <div style="width:0
DIV+CSS實現仿SELECT下拉框程式碼(JQUERY)
wangking 寫道 下拉框特點:1.可自定義下拉框的高度和寬度。2.無需使用者寫多餘程式碼,就和用原生態的SELECT一樣的原理,使用簡單。3.功能強大,在下拉框中增加了extraData DIV層,供使用者自定義特殊需求,當然使用者也可以不選擇使用extraDat
小三角帶邊框帶陰影的div——css實現效果
第一種情況:帶邊框的小三角 乍一看,很簡單,做小三角,首先想到的是利用border的transparent特性,可以製作出小三角的效果。但是注意,這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西,讓兩者有1px的錯位。問題
DIV+CSS實現區域滑鼠事件的動態效果
現在WEB2.0時代來了,你可以在很多網站上看到一種滑鼠移動上去表格會有狀態的效果,今天偶就給大家講一下具體的做法,可能我這個方法不太好,還請大家多多指點。 其實方法就是在DIV裡面加入了 OnMouseOver(滑鼠移動到上面) OnMouseOut(滑鼠移開) OnMo
div+css實現簡單的彈出窗(背景變灰色)
自己做了一個網站,需要用到彈出框的功能,以前沒做過這個,就去網上查了下資料,然後試著寫了一個最簡單的彈出框效果。 需求:點選彈出框按鈕,在原頁面基礎上彈出一個彈出框,並且背景要變成灰色,原頁面不能被編
三種純CSS實現三角形的方法
原文:http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html 純 CSS 做三角形的方法,目前我知道三種,分別是利用 border 屬性,“◆”字元,和 CSS3 transfr
DIV+CSS實現中間彈窗效果
css程式碼 <style type="text/css" > body{ font-family: "Microsoft YaHei" ! important; } /*灰色遮
【程式碼】用div+css實現 在新視窗中開啟指定的DIV標籤下連結
平時都遇到過,在發貼回覆的時候,有使用者自行新增他們網站連結,以增加外鏈,但有時候文章編輯器不能保證他們留下的連結都在新視窗中開啟,如果在原視窗中開啟,就會使使用者離開我們的網站,這不是我們願意看到的,那如何限制在一個
【CSS】非常簡單的css實現div懸浮頁面底部
簡單的 fixed style 簡單 底部 demo 實現 clas post <div id="demo_div"></div> <style> #demo_div{ left: 0; positi