div + css tutorial diagonal analog form
Sometimes insert a document, use the form on the diagonal, common practice is the way to deal with the picture, there is the use vml to draw the diagonal, can not use html + css way to achieve it? The answer is yes, we have to simulate a table below the diagonal.
Principle:
With the border line to simulate the slash, we know that if the border line of a DIV wide enough to set and define a different color, its adjacent junction of the two border lines are diagonal. Know this principle, we can use the border-left and border-top to simulate the effect of slash.
We first create a structure:
<div>
<b> Category </ b>
<em> name </ em>
</ Div>
We use <div> as diagonal container, we set the diagonal style, the key code as follows:
. Out (
border-top: 40px # D6D3D6 solid; / * border width is equal to the form on the first trekking high * /
width: 0px; / * for container width is 0 * /
height: 0px; / * let the container height is 0 * /
border-left: 80px # BDBABD solid; / * left border width is equal to the first line of the first table cell width * /
position: relative; / * for the two sub-containers inside the absolute positioning * /
)
<b> and <em> two labels to set the two categories, respectively, are set to block structure display: block; remove the default font style font-style: normal; container set by his father, relative positioning, so Set it as absolute positioning, so it can be offset to a specified location you want.
b (font-style: normal; display: block; position: absolute; top:-40px; left:-40px; width: 35px;)
em (font-style: normal; display: block; position: absolute; top:-25px; left:-70px; width: 55x;)
A diagonal slash out on the simulation. Know the principles, you can become a lot of interesting things come out, and good luck!
This simulation method has its drawbacks diagonal:
Width height must be known
The length width and height can not be too much difference, you can try to pull the width of several times longer than high, see the effect. (To you leave work practice exercises)
There is not inclined to set the color line.
Another: The above code only tested ie6 and ff3, without making test other browsers, please friends test.
The following is the complete code:
<! 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> analog form with a div + css diagonal </ title>
<style type=”text/css”>
* (Padding: 0; margin: 0;)
caption (font-size: 14px; font-weight: bold;)
table (border-collapse: collapse; border: 1px # 525152 solid; width: 50%; margin: 0 auto; margin-top: 100px;)
th, td (border: 1px # 525152 solid; text-align: center; font-size: 12px; line-height: 30px; background: # C6C7C6;)
th (background: # D6D3D6;)
/ * Analog diagonal * /
. Out (
border-top: 40px # D6D3D6 solid; / * border width is equal to the form on the first trekking high * /
width: 0px; / * for container width is 0 * /
height: 0px; / * let the container height is 0 * /
border-left: 80px # BDBABD solid; / * left border width is equal to the first line of the first table cell width * /
position: relative; / * for the two sub-containers inside the absolute positioning * /
)
b (font-style: normal; display: block; position: absolute; top:-40px; left:-40px; width: 35px;)
em (font-style: normal; display: block; position: absolute; top:-25px; left:-70px; width: 55x;)
. T1 (background: # BDBABD;)
</ Style>
</ Head>
<body>
<table>
<caption> analog form with a div + css diagonal </ caption>
<tr>
<th style=”width:80px;”>
<div>
<b> Category </ b>
<em> name </ em>
</ Div>
</ Th>
<th> Year </ th>
<th> Class </ th>
<th> results </ th>
<th> class equalization </ th>
</ Tr>
<tr>
<td> Zhang ming </ td>
<td> 3 </ td>
<td> 2 </ td>
<td> 62 </ td>
<td> 61 </ td>
</ Tr>
<tr>
<td> Li xiao </ td>
<td> 3 </ td>
<td> 1 </ td>
<td> 48 </ td>
<td> 67 </ td>
</ Tr>
<tr>
<td> Wang yang </ td>
<td> 3 </ td>
<td> 5 </ td>
<td> 79 </ td>
<td> 63 </ td>
</ Tr>
<tr>
<td> Zhao hai </ td>
<td> 3 </ td>
<td> 4 </ td>
<td> 89 </ td>
<td> 66 </ td>
</ Tr>
</ Table>
</ Body>
</ Html>