บางครั้งเมื่อแทรกเอกสาร จะต้องใช้เส้นทแยงมุมของตาราง วิธีทั่วไปคือการใช้รูปภาพเพื่อประมวลผล และยังมีการใช้ vml เพื่อวาดเส้นทแยงมุมด้วย คำตอบคือใช่ มาจำลองเส้นทแยงมุมของตารางกัน
ใช้เส้นขอบเพื่อจำลองเส้นทแยงมุม เรารู้ว่าหากเส้นขอบของ DIV มีความกว้างเพียงพอและมีการกำหนดสีที่ต่างกัน จุดตัดของเส้นขอบสองเส้นที่อยู่ติดกันจะเป็นเส้นทแยงมุม เมื่อทราบหลักการนี้แล้ว เราสามารถใช้ border-left และ border-top เพื่อจำลองผลกระทบของเครื่องหมายทับได้
เรามาสร้างโครงสร้างกันก่อน:
<ระดับ div="ออก">
<b>หมวดหมู่</b>
<em>ชื่อ</em>
</div>
เราใช้ <div class="out"> เป็นคอนเทนเนอร์แนวทแยง และเราตั้งค่าสไตล์สแลชเป็นดังนี้:
.ออก{
border-top:40px #D6D3D6 solid;/*ความกว้างของเส้นขอบด้านบนเท่ากับความสูงของแถวแรกของตาราง*/
width:0px;/*ให้ความกว้างของคอนเทนเนอร์เป็น 0*/
height:0px;/*ให้ความสูงของคอนเทนเนอร์เป็น 0*/
border-left:80px #BDBABD solid;/*ความกว้างของเส้นขอบด้านซ้ายเท่ากับความกว้างของเซลล์แรกในแถวแรกของตาราง*/
position:relative;/*ทำให้คอนเทนเนอร์ย่อยทั้งสองอยู่ภายในตำแหน่งที่แน่นอน*/
}
<b> และ <em> แท็กถูกใช้เพื่อตั้งค่าสองหมวดหมู่ และตั้งค่าให้บล็อกโครงสร้างตามลำดับ display:block; clear font style:normal; เนื่องจากคอนเทนเนอร์หลักได้ตั้งค่าตำแหน่งที่สัมพันธ์กัน ดังนั้นให้ตั้งค่า เป็นตำแหน่งที่แน่นอน เพื่อให้คุณสามารถชดเชยตำแหน่งที่คุณต้องการระบุได้
b{แบบอักษร:ปกติ;จอแสดงผล:บล็อก;ตำแหน่ง:สัมบูรณ์;ด้านบน:-40px;ซ้าย:-40px;ความกว้าง:35px;}
em {แบบอักษร: ปกติ; จอแสดงผล: บล็อก; ตำแหน่ง: สัมบูรณ์; ด้านบน: -25px; ซ้าย: -70px; ความกว้าง: 55x;}
เส้นทแยงมุมดังกล่าวถูกจำลองขึ้น ถ้ารู้หลักการก็สามารถเปลี่ยนเป็นเรื่องที่น่าสนใจได้หลายอย่างครับ ขอให้โชคดี!
ข้อเสียของวิธีการจำลองแนวทแยงนี้:
1. ต้องทราบความกว้างและความสูง
2. ความยาวของ
ความกว้างและความสูงต้องไม่แตกต่างกันมากเกินไป คุณสามารถลองทำความกว้างให้ยาวกว่าความสูงได้หลายครั้งจึงจะเห็นผล
นอกจากนี้ ไม่สามารถตั้งค่าสีของเส้นทแยงมุมได้
หมายเหตุอีกประการหนึ่ง: โค้ดด้านบนทดสอบเฉพาะ ie6 และ ff3 และเบราว์เซอร์อื่นๆ ไม่ได้ทดสอบ