Another way to round corners. One picture. Transparency. IE6

    I propose another way to round corners. One picture is used, possibly with an alpha channel (works in IE6 as well).
    For example, I made two demo pages, because the code when using an opaque image and with transparency for IE6 is quite different.
    Unfortunately, I could not do without expressions in IE6 (in the example with a transparent picture), but they are quite lightweight.

    Theory


    The theoretical basis of this method is very simple. You need to create a picture with corners (placing them in a special way, see below) with sizes that allow you to correctly display these same corners and borders with any reasonable scaling and availability of content with the maximum volume for your layout. In the example, I used a picture of 3000x1000 px, with an increase in the size of the picture, its volume will increase slightly.
    This solution uses one main unit and 3 auxiliary units.
    For the main block, you need to shift the background to the left up to such a distance that the upper left rounding is in the upper left corner of the main block.
    Auxiliary blocks are needed to display:
    • left lower curve and lower border
    • right upper curve and right border
    • bottom right

    Auxiliary blocks are positioned absolutely and the necessary (depending on the fillet radius) offsets relative to the edges of the main block are set.
    Explanations in the pictures:
    Fig. 1. Background picture.
    image
    Fig. 2. The main and auxiliary units.
    image
    For a variant with a transparent picture, the theory is the same.

    Harsh reality


    The theory works well for modern browsers, but you need to use hacks to implement the solution in IE6.
    To solve with an opaque picture, the problem lies in the impossibility in IE6 of setting block offsets at the same time as top and bottom or left and right. Solution 2: use expression to "emulate" the offsets or specify auxiliary block sizes so that they extend outside the container, and overflow: hidden for the container (which I did).
    When using images with an alpha channel, things are much worse ...
    To display such a picture in IE6, use the AlphaImageLoader filter, which combines the upper left corner of the image with the upper left corner of the element to which it is applied. To emulate the positioning of the background in this case, you need to use additional auxiliary elements, load the picture with a filter in them, and then position it, showing one or another section with a rounding. You can see such an implementation in my example.

    Also popular now: