CSS3 Backwards-compatible tip

Hi, guys, still in the top and bottom of the tip of the anxious, still use the use of pictures, symbols, multi-layered relationships or border 2 triangles overlap to achieve? Since it's not perfect, let's take a look at how the CSS3 Transfrom is right for you.

Overview:

The CSS visual formatting model describes the coordinate system of each element's position on a coordinate systems. Positioning and size in this coordinate space can be thought of as pixels, starting at the origin point with the right and down actual values. The Transform property can modify this coordinate space. With transformations, elements can be transformed, rotated, and extended in two or three-dimensional spaces.

The point is that we're going to use Transfroms's transform rendering model:

Creates a new local coordinate system element for the property of ' transform ' to apply it to a value other than the specified ' none '. The local coordinate system renders the mapping of the elements through the transformation matrix of the elements. The conversion is cumulative. In other words, the elements establish their local coordinate system in their parent coordinate system. From the user's point of view, an element effectively accumulates all of the transform attributes to suit its ancestors and any local changes. The accumulation of these transform defines a universal transformation matrix (CTM) for elements.

EXAMPLE

1. div {

2. Transform:translate (100px,100px);

3. }

The element that this transformation 100 pixels moves in the X and y directions.

EXAMPLE

1. div {

2. height:100px;width:100px;

3. Transform:translate (80px,80px) scale (1.5,1.5) rotate (45deg);

4. }

6. <div style= "Transform:translate (80px, 80px)" >

7. <div style= "Transform:scale (1.5, 1.5)" >

8. <div style= "Transform:rotate (45deg)" ></div>

9. </div>

10. </div>

This transformation moves the 80-pixel element in the X and y directions, then by the 150%-scale element, then its z-axis rotates 45 ° clockwise. Attention needs to be given to the size and rotation of the element in the center, because the element has "50% 50% of the transformation source by default." It is important to note that the same rendering can be obtained by equivalent transformations of nested elements.

The OK book belongs to the story, and tip comes in a total of two steps:

1. We want to create a square shape with border, with CSS3 Transfrom for 45 degrees of rotation.

2.IE implementation-the CSS3 Transfrom compatibility scheme is implemented using the IE matrix filter.

EXAMPLE

2. . Tips {

4. width:200px;

6. position:relative;

8. padding:10px;

10. Border:1pxsolid Blue;

12. Background-color:skyblue;

14. border-radius:5px;

16. }

18. . diamond{

20. -ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (m11=0.7071067811865475, m12=-0.7071067811865477, m21= 0.7071067811865477, m22=0.7071067811865475, sizingmethod= ' auto expand ') ";

22. Filter:progid:DXImageTransform.Microsoft.Matrix (

24. m11=0.7071067811865475,

26. m12=-0.7071067811865477,

28. m21=0.7071067811865477,

30. m22=0.7071067811865475,

32. sizingmethod= ' Auto expand '

34. );

36. -moz-transform:rotate (45DEG);

38. -o-transform:rotate (45DEG);

40. -webkit-transform:rotate (45DEG);

42. -ms-transform:rotate (45DEG);

44. Transform:rotate (45DEG);

48. Position:absolute;

50. width:10px;

52. height:10px;

54. Background-color:skyblue;

56. Display:block;

58. font-size:0;

60. }

62. : Root. diamond{filter:none\9;} /*IE9 hack*/

66. . tip-top{

68. Border-top:1pxsolid Blue;

70. Border-left:1pxsolid Blue;

72. left:10px;

74. top:-6px;

76. }

78. . tip-left{

80. Border-bottom:1pxsolid Blue;

82. Border-left:1pxsolid Blue;

84. left:-6px;

86. top:20px;

88. }

90. . tip-bottom{

92. Border-bottom:1pxsolid Blue;

94. Border-right:1pxsolid Blue;

96. left:10px;

98. bottom:-6px;

100. }

102. . tip-right{

104. Border-top:1pxsolid Blue;

106. Border-right:1pxsolid Blue;

108. right:-6px;

110. top:20px;

112. }

116. <div class= "Tips" >

118. <i class= "Diamond tip-top" ></i>

120. <i class= "Diamond Tip-bottom" ></i>

122. <i class= "Diamond Tip-left" ></i>

124. <i class= "Diamond Tip-right" ></i>

126. <div class= "Text" ></div>

128. </div>

Reference reading: http://www.w3.org/TR/2012/WD-css3-transforms-20120403

CSS3 Backwards-compatible tip