Drawing a diagonal border
A diagonal border can be drawn in any region where you can specify a border, such as a table cell. A diagonal border drawn with -ah-diagonal-border-* is a line between the before–start vertex and after–end vertex of the region, and a reverse diagonal border drawn with -ah-reverse-diagonal-border-* is a line between the before–end vertex and after–start vertex of the region.
Diagonal border in <table>
Diagonal border on the cell in the first row of the first column in a table using -ah-diagonal-border-color: black, -ah-diagonal-border-style: solid, and -ah-diagonal-border-width: 1pt
|
Sales Month
Group
|
January |
February |
March |
| Group A |
58.4% |
68.2% |
92.0% |
| Group B |
67.0% |
70.7% |
88.2% |
| Group C |
87.0% |
72.3% |
95.2% |
Reverse diagonal border
Reverse diagonal border on an <div> which has been defined using the following CSS styling:
-ah-reverse-diagonal-border-style: solid;
-ah-reverse-diagonal-border-width: 4pt;
-ah-reverse-diagonal-border-color: #2222FF;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Ut tincidunt lorem erat, at elementum nibh varius consectetur. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing. Duis sit amet ipsum non elit tincidunt sagittis ac non tortor. Mauris commodo, elit a imperdiet interdum, nulla velit viverra elit, at scelerisque urna est eget lacus. Integer eu lobortis neque. Donec malesuada sed arcu vitae fringilla.