Five ways to achieve the diagonal line header effect in the table, table diagonal lines
Table tables are familiar to everyone. We often encounter this in the Code. It is sometimes necessary to add a diagonal line to the table header, but how can we achieve this?
I have summarized the following methods:
1. The simplest practice
Go directly to the company's UI and ask her to make an image, put it here as a background image, and then fill it up. Is it easy !!!
2. Quite simple practices
As a friend who knows about css3, the transform attribute instantly appears in his mind. Yes, it does. It is also very simple, there is a problem that we should pay attention to the compatibility of browsers. Everyone should keep a sense of crisis at all times (IE still exists). If your company requires only chrome compatibility, this method is suitable for you.
3. Simple practices
. BiaoTou {border-top: 200px # 199fff solid;/* the top border width is equal to the height of the first row of the table */border-left: 200px # ff8838 solid; /* the width of the left border is equal to the width of the first row of the table */}
<td width="200"> <div class="biaoTou"> </div></td>
This method is also very simple, just write it down according to the above format. However, this method has an obvious problem: in fact, This method uses different border colors to divide the diagonal lines in the header. The colors on both sides of the diagonal lines cannot be the same, this method can be used for tables such as promotions. However, this method is not applicable if we need to have the same color on both sides of the diagonal line. Use it with caution.
4. Simple practice
In fact, another new label canvas of css3 can be used for this effect. It is a very simple practice to draw a diagonal line as a canvas. It is not explained in detail, but there is also a problem, that is, the compatibility problem that is often discussed. If it is only compatible with chrome, you can do whatever you want (Why do we always have to consider the hateful IE, And I want to only do projects compatible with Google ).
5. Simple practices
That's how JavaScript works.
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN "" http://www.w3.org/TR/html4/loose.dtd "> <HTML> <HEAD> <TITLE> diagonal line header </TITLE> <meta http-equiv =" content-type "content =" charset = gbk "> </HEAD> <body leftmargin = 0 topmargin = 0> <br> <div height = "300"> header </div>Okay. I have finished all the five methods. I hope this will help you.
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
