Layout of rounded borders and sharp corners
The complexity of the interface elements increases with each new layout, which causes a lot of trouble for layout designers. Developing technologies allow you to create complex applications in the WEB (Google will not let me lie), so the designers do not restrain themselves and draw more and more sophisticated things. As a rule, this leads to a lot of graphics on the pages.
This article provides a couple of recipes that are useful to the author. Perhaps you are already familiar with them, and perhaps you can bring out something new for yourself, you decide.
I
’ll immediately explain what it is about: It is necessary to lay out this block so that it stretches in width and height. As a rule, the first thing that comes to mind is to make up a 3x3 table. Put 4 different images with corners in the corner cells, put the content in the center, and hang the corresponding borders for the rest of the cells. The method is cross-browser and quite simple. But firstly, it’s not possible to make up such blocks with tables, and secondly, four small images can be abandoned.
So, we will collect four corners in one image. In my example, I got the following result (32x26 px):
Now we just have to position this image in the background in four different ways in
16x13px blocks at the corners of the block. As a result, the author turned out like this :
CSS:
HTML:
<div class = "roundborder">
<div class = "t">
<div class = "angles l"> </div>
<div class = "angles r"> </div>
</div>
<div class = "content">
Content
</div>
<div class = "b">
<div class = "angles l"> </div>
<div class = "angles r"> </div>
</div>
< / div>
Initially, the corners were laid out through 4 DIVA scattered around the corners, and everything would be fine if it weren't for one BUT - IE6. This number didn’t creep into it; I had to rearrange everything in this way. So, the problem is solved:
You see a layout with such a block:
The first thing that comes to mind: "Chooort, you have to cut this triangle and somehow attach it to the block." It turns out not necessary. The reception was spied on in the hh.ru layout , for which the headhunter layout designer has a huge respect!
It turns out that the boundaries of the block are divided by joint angles in equal shares, which will create any sharp corners. Illustration:
This is just one line of HTML / CSS:
<div style = "border-top: 25px solid # 00aeef; border-left: 150px solid # ec008c; border-bottom: 100px solid # fff200; border-right: 50px solid # 999; "> </div>
Here you will find a more bizarre application of this technique. Screenshot for those who are too lazy to look into the demo:
You do not have to go far for an example of use. Everyone knows the Yandex muzzle:
Instead of the png-shk which they use to create a corner, you can create such a corner from a single border:
<div style = "border-top: 34px solid #FFF; border-left: 17px solid # FFCC00; border- bottom: 34px solid #FFF; "> </div>
And by the way, do not forget that from a finite number of triangles you can assemble an arbitrary polygon.
If someone wants to share their ways of solving similar problems - please comment. Good luck in the fight against designer arbitrariness!
CrossPost Rounded borders and sharp corners since 2007.fastcoder.ru .
1) Kamrad maxshopen correctly noted that the border is also transparent, which allows us to typeset without looking at the background of the page. And dmitrybaranovskiy added that the problem of using a transparent border in IE6 is solved by the Chroma IE filter.
2) Comrades vasilioruzanni and dmitrybaranovskiy suggest that the idea with sharp corners is not new and is found here:
www.uselesspickles.com/triangles/demo.html
tantek.com/CSS/Examples/polygons.html
This article provides a couple of recipes that are useful to the author. Perhaps you are already familiar with them, and perhaps you can bring out something new for yourself, you decide.
1. Rounded borders
I
’ll immediately explain what it is about: It is necessary to lay out this block so that it stretches in width and height. As a rule, the first thing that comes to mind is to make up a 3x3 table. Put 4 different images with corners in the corner cells, put the content in the center, and hang the corresponding borders for the rest of the cells. The method is cross-browser and quite simple. But firstly, it’s not possible to make up such blocks with tables, and secondly, four small images can be abandoned.
So, we will collect four corners in one image. In my example, I got the following result (32x26 px):
Now we just have to position this image in the background in four different ways in
16x13px blocks at the corners of the block. As a result, the author turned out like this :
CSS:
.roundborder {
border-top:1px solid #DBDBDB;
border-bottom:1px solid #DBDBDB;
}
.roundborder .content {
border-left:1px solid #DBDBDB;
border-right:1px solid #DBDBDB;
text-align:center;
color:#7A7A7A;
padding:10px 15px;
}
.roundborder .t, .roundborder .b {
position:relative;
height:12px;
}
.roundborder .t div, .roundborder .b div {
position:absolute;
width:16px; height:13px;
padding:0; margin:0;
}
.roundborder .t .l {
top:-1px; left:0;
background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) top left;
}
.roundborder .t .r {
top:-1px; right:0;
background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) top right;
}
.roundborder .b .l {
background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) bottom left;
bottom:-1px; left:0;
}
.roundborder .b .r {
background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) bottom right;
bottom:-1px; right:0;
}HTML:
<div class = "roundborder">
<div class = "t">
<div class = "angles l"> </div>
<div class = "angles r"> </div>
</div>
<div class = "content">
Content
</div>
<div class = "b">
<div class = "angles l"> </div>
<div class = "angles r"> </div>
</div>
< / div>
Initially, the corners were laid out through 4 DIVA scattered around the corners, and everything would be fine if it weren't for one BUT - IE6. This number didn’t creep into it; I had to rearrange everything in this way. So, the problem is solved:
2. Angles less than 90 °
You see a layout with such a block:
The first thing that comes to mind: "Chooort, you have to cut this triangle and somehow attach it to the block." It turns out not necessary. The reception was spied on in the hh.ru layout , for which the headhunter layout designer has a huge respect!
It turns out that the boundaries of the block are divided by joint angles in equal shares, which will create any sharp corners. Illustration:
This is just one line of HTML / CSS:
<div style = "border-top: 25px solid # 00aeef; border-left: 150px solid # ec008c; border-bottom: 100px solid # fff200; border-right: 50px solid # 999; "> </div>
Here you will find a more bizarre application of this technique. Screenshot for those who are too lazy to look into the demo:
You do not have to go far for an example of use. Everyone knows the Yandex muzzle:
Instead of the png-shk which they use to create a corner, you can create such a corner from a single border:
<div style = "border-top: 34px solid #FFF; border-left: 17px solid # FFCC00; border- bottom: 34px solid #FFF; "> </div>
And by the way, do not forget that from a finite number of triangles you can assemble an arbitrary polygon.
Conclusion
If someone wants to share their ways of solving similar problems - please comment. Good luck in the fight against designer arbitrariness!
CrossPost Rounded borders and sharp corners since 2007.fastcoder.ru .
Additions
1) Kamrad maxshopen correctly noted that the border is also transparent, which allows us to typeset without looking at the background of the page. And dmitrybaranovskiy added that the problem of using a transparent border in IE6 is solved by the Chroma IE filter.
2) Comrades vasilioruzanni and dmitrybaranovskiy suggest that the idea with sharp corners is not new and is found here:
www.uselesspickles.com/triangles/demo.html
tantek.com/CSS/Examples/polygons.html