To simulate a table diagonal with div+css

Source: Internet
Author: User
Tags relative first row touch

Sometimes when inserting a document, use the diagonal of the table, common practice is to use the way of the picture to handle, there is to use VML to draw diagonal line, can use html+css way to realize? The answer is yes, let's touch the diagonal of a table below.

Using a border line to touch a slash, we know that if you set a div's border line wide enough to define a different color, its adjacent two border lines are diagonal. Knowing this principle, we can use Border-left and border-top to simulate the effect of a slash.

We first create a structure:

<div class= "Out" >

<b> category </b>

<em> name </em>

</div>

We use the <div class= "out" > as a diagonal container, we set the slash style, the key code is as follows:

. out{

border-top:40px #D6D3D6 solid;/* top border width equals table first row Height * *

width:0px;/* make the container width 0*/

height:0px;/* make the container height 0*/

border-left:80px #BDBABD solid;/* The width of the left border is equal to the first width of the first row of the table * *

position:relative;/* let the inside of the two sub containers absolutely positioning * *

}

<b> and <em> two labels to set up two categories, set them to block structure Display:block, clear their default font style Font-style:normal, and set them as absolute positioning because their parent container has relative positioning set. This will offset it to the location you want to specify.

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;}

Such a diagonal line is modeled. Know the principle, you can become a lot of interesting things out, wish you good luck!

The disadvantage of this diagonal simulation method:

1. The width height must be known

2. The width of the length can not be too large, you can try to pull the width than the height of several times longer, see the effect

3. There is also a slash bar can not set the color.

Another: The above code only tests IE6 and FF3, other browsers do not test.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.