Div полукруглые углы (only borders) @ DeForum.ru

Народ, div со скругленным углом(left bottom, впрочем это не важно) с бордером как сотворить? Заполение не важно, главное границы.

P.S.: Желательно чтобы с gif-картинкой и CSS

также, как и в прошлый раз.
Только вместо указания цвета нужно нарисовать положку уже с бордером заведомо большего рамзера, чем возможные размеры блока и картинку-уголок аналогично уже нужно рисовать с бордером.

0 Сообщения: 434 Зарегистрирован: 09.07.06

http://www.spiffycorners.com
http://kalsey.com/2003/07/rounded_corners_in_css/
http://www.html.it/articoli/nifty/index.html
http://www.albin.net/css/roundedcorners

ichik, да, к roundcorners снова возвращаемся. ;-)

ShavkatВспоминаю, что уже писал сюда с похожим вопросом, вроде так?:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<!-- Meta http equivalent was here                                       -->
<title> title</title>
<style type="text/css" media="all">
html, body{font-family: Verdana, sans-serif;font-size: normal;text-align: justify; background-color:#000;}
#coolcorner {background: transparent; margin:1em;}
#coolcorner p {margin:0 0.5em;padding: 0.5em;text-indent:1em;}
#coolcorner2 {background: transparent; margin:1em;}
#coolcorner2 p {margin:0 0.5em;padding: 0.5em;text-indent:1em;}
.topcorner, .bottomcorner {display:block; background:transparent; font-size:1px;}
.cornerbold1, .cornerbold2, .cornerbold3, .cornerbold4 {display:block; overflow:hidden;}
.cornerbold1, .cornerbold2, .cornerbold3 {height:1px;}

<!-- colors of rounded corners of border are described below -->
.cornerbold2, .cornerbold3, .cornerbold4 {background:orange; border-left:1px solid #fff; border-right:1px solid #fff;}

<!-- colors of upper and bottom border are described below -->
.cornerbold1 {margin:0 5px; background:#fff;}


.cornerbold2 {margin:0 3px; border-width:0 2px;}
.cornerbold3 {margin:0 2px;}
.cornerbold4 {height:2px; margin:0 1px;}

<!-- colors of left and right border are described below -->
.doxcontent {display:block; background:#d4d4d4; border:0 solid #fff; border-width:0 1px;}

<!-- colors of border below header is described below -->
.doxcontent h1,h2,h3,h4 {text-align:center;margin-top:0;margin-bottom:0;background-color:orange;font-variant:small-caps;border-bottom:1px solid #fff;color:#000;}
.bottom {background: #d4d4d4;}
</style>
</head>
<body>

<div id="coolcorner">
<strong class="topcorner"><strong class="cornerbold1"></strong><strong class="cornerbold2"></strong><strong class="cornerbold3"></strong><strong class="cornerbold4"></strong></strong>
<div class="doxcontent">
<h1>lorem ipsum dolor sit amet. part I</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Nam dictum pellentesque pede. Praesent rhoncus erat sit amet ligula. Mauris blandit libero quis sem. 
Praesent eget nibh. Etiam urna lorem, vehicula vitae, accumsan ac, dapibus et, metus. Sed gravida lobortis 
odio. Nulla nonummy, arcu sit amet consequat vestibulum, nunc arcu commodo erat, id facilisis metus 
elit sed est. Mauris interdum justo non metus. Duis fermentum, tortor nec suscipit dictum, odio nunc 
auctor odio, rutrum pharetra magna lorem pharetra ipsum. Pellentesque justo. Curabitur at odio vel 
lectus imperdiet convallis. Etiam hendrerit turpis aliquet neque. Mauris pretium blandit est. Cras tellus. 
</p>
</div>
<strong class="bottomcorner"><strong class="cornerbold4 bottom"></strong><strong class="cornerbold3 bottom"></strong><strong class="cornerbold2 bottom"></strong><strong class="cornerbold1"></strong></strong>
</div>
</body>
</html>

упс, только сейчас заметил, что просили с картинкой... а я-то, а я...

вот сделал то, что нужно

пример без задания ширины http://otkrytky-stoyky.ru/fx/site/item.html
пример с заданием ширины http://otkrytky-stoyky.ru/fx/site/item2.html

только вот никак не пойму одно свойство. Как надо делать чтобы див не растягивался когда не задаешь ширину, ну чтобы по ширине контента был?
спасибо

tentoys, в FF не видно

tentoys писал(а):

вроде так?:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/199.…

в FF и Мозилле не видно

Shavkat писал(а):

только вот никак не пойму одно свойство. Как надо делать чтобы див не растягивался когда не задаешь ширину, ну чтобы по ширине контента был?

Сказали же, пара свойств нужна: сначала float, потом clear. Если асболютно позиционируете — внешний контейнер, если плавающий — можно без clear и флоатить в нужную сторону.

Хм... откопал тут свежатинку

Набрёл на ещё один способ, по-моему, вполне жизнеспособный. МОжет, пригодится кому
One pixel notched corners as used by Google Analytics

DeДверь
Логин:
Пароль:
	Автологин