標籤：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style> #triangle{width:0; height:0; border-width:25px; border-style:solid; border-color:transparent #990 transparent transparent;font-size:0; line-height:0; position:relative; top:100px;left:-250px} #triangle1{width:0; height:0; border-width:25px; border-style:solid; border-color:transparent #FFF transparent transparent;font-size:0; line-height:0; position:relative; top:100px; left:-298px;}</style></head><body><center><div style="border:1px solid #990;width:500px;height:500px;"> <em id="triangle"></em> <em id="triangle1"></em> </div></center></body></html>
上面的代碼 就要邏輯就是 一個控制項 如果把他的寬高設定為0 邊框設定寬一些 就會呈現4個三角形組成的一個正方形.我們弄兩個這樣的控制項.每個控制項就顯示你要顯示的邊框,其他的都弄成透明的.然後一個覆蓋一個就行.
HTML 三角形實現
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
