Закругленные углы

@Midav · Регистрация: 11.01.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток! Просьба помочь с закругленными углами дива.вот код html и css

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stal</title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div class="Top_menu">контент</div>  
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.Top_menu{
    background: #f4f4f4;
    padding: 10px;
}
.Top_menu:before{
    content:url(../images/tl.png);
    background: url(../images/tr.png) no-repeat top right;
    height: 10px;
    display: block;
    margin: -10px -15px 15px -15px;
}
 
.Top_menu:after{
    content:url(../images/bl.png);
    background: url(../images/br.png) no-repeat right bottom;
    height: 10px;
    display: block;
    margin: 10px -10px -10px -15px;
}

Нужен именно этот метод.
border-radius не предлагать, только css и картинки. Что я делаю не так?

@stan07 · 11.01.2013, 20:15

Есть несколько методов, чтобы сделать скругленные углы. Один из них называется звездочка. Суть состоит в том, чтобы нарисовать картинку со звездочкой, и расположить онду и ту же картинку по всем 4-м углам элемента, скрывая все что выходит за пределы блока с помощью свойства overflow.
Нарисовал картинку, думаю из нее можно уловить общий смысл.
Ну то есть верхний блок с картинкой буде перекрывать основной блок создавая скругленные углы.

@fvc · 11.01.2013, 20:25

не советую after before, лучше добавьте больше элементов div или border-image

@newJS · 11.01.2013, 20:51

посмотри эту тему

@Midav · 11.01.2013, 21:05 **[ТС]**

Спасибо, но очень надо через after before

@fvc · 12.01.2013, 00:07

у меня такая фигура получается

@fvc · 12.01.2013, 00:08

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.Top_menu{
    margin:0;
    padding:0;
    border:1px solid transparent;
    width:104px;
    background-color:gray;
}
.Top_menu:before{
    height:15px;
    width:110px;
    content:url(top_left.gif);
    background:url(top_right.gif) no-repeat right bottom;
    display: block;
    margin:-2px 0 0 -4px;
} 
.Top_menu:after{
    height:15px;
    width:110px;
    content:url(bottom_left.gif);
    background:url(bottom_right.gif) no-repeat right bottom;
    display: block;
    margin:0 0 -2px -4px;
}

@Midav · 12.01.2013, 12:06 **[ТС]**

Спасибо

@fvc · 12.01.2013, 14:41

пожалуйста, но все таки криво оно выглядит

@Taatshi · 12.01.2013, 15:21

fvc, так принцип понятен - а картинки сами нарисуйте - покрасивее...

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	11.01.2013, 20:15
	Есть несколько методов, чтобы сделать скругленные углы. Один из них называется звездочка. Суть состоит в том, чтобы нарисовать картинку со звездочкой, и расположить онду и ту же картинку по всем 4-м углам элемента, скрывая все что выходит за пределы блока с помощью свойства overflow. Нарисовал картинку, думаю из нее можно уловить общий смысл. Ну то есть верхний блок с картинкой буде перекрывать основной блок создавая скругленные углы. 0

@fvc 17 / 17 / 0 Регистрация: 31.12.2012 Сообщений: 68
	11.01.2013, 20:25
	не советую after before, лучше добавьте больше элементов div или border-image 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	11.01.2013, 20:51
	посмотри эту тему 0

@Midav 0 / 0 / 0 Регистрация: 11.01.2013 Сообщений: 3
	11.01.2013, 21:05 [ТС]
	Спасибо, но очень надо через after before 0

@fvc 17 / 17 / 0 Регистрация: 31.12.2012 Сообщений: 68
	12.01.2013, 00:07
	у меня такая фигура получается Миниатюры 0

@Midav 0 / 0 / 0 Регистрация: 11.01.2013 Сообщений: 3
	12.01.2013, 12:06 [ТС]
	Спасибо 0

@fvc 17 / 17 / 0 Регистрация: 31.12.2012 Сообщений: 68
	12.01.2013, 14:41
	пожалуйста, но все таки криво оно выглядит 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	12.01.2013, 15:21
	fvc, так принцип понятен - а картинки сами нарисуйте - покрасивее... 0