用css寫三角形的方法

來源：懂視網責編：小采時間：2020-11-27 18:52:04

用css寫三角形的方法

用css寫三角形的方法:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; font-size:1

推薦度：

點擊下載本文 文檔為doc格式

導讀用css寫三角形的方法:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; font-size:1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋體", Arial; line-height:1.8; list-style:none;}
#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
#info p{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}
/*一些三角的寫法*/ 
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;} 
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
</style> 
</head> 
<body> 
<p id="info"> 
<h1>一些三角形的寫法</h1> 
<p id="com_a"></p> 
<p id="com_b"></p> 
<p id="com_f"></p> 
<p id="com_g"></p> 
<p id="com_c"></p> 
<p id="com_d"></p> 
<p id="com_e"></p> 
<p id="com_h"></p> 
<p id="com_i"></p> 
</p> 
</body> 
</html>