Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
zhundik
0 / 0 / 1
Регистрация: 12.03.2014
Сообщений: 61
1

Закругление углов в CSS

17.08.2018, 14:49. Просмотров 149. Ответов 8
Метки нет (Все метки)

Цитата Сообщение от telek Посмотреть сообщение
вот еще метод закругления углов http://ftpn.ru/css-skruglenie-uglov/
А как сделать также, только у каждого угла будет свой набор дивов?
Я примерно представляю, но как убрать лишнее по углам тогда
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.08.2018, 14:49
Ответы с готовыми решениями:

CSS закругление углов
скажите чем обычно пользуються для закругления углов в ie ? пробывал всякие...

Закругление углов в CSS
рылся в интернете, нашел как закруглить углы через свойство border-radius ,...

Закругление углов у блока
Подскажите как закруглить уголки у блока чтобы во всех браузерах отображалось ?

Закругление углов в Мозиле
Мозила не закругляет углы как ее научить это делать тень блока выходит а углы...

Закругление углов фото
Подскажите, народ) Какой тег ввести для закругления фото по 2 верхним углам? В...

8
andyyy
598 / 197 / 111
Регистрация: 26.05.2016
Сообщений: 1,419
17.08.2018, 15:02 2
Цитата Сообщение от zhundik Посмотреть сообщение
А как сделать также, только у каждого угла будет свой набор дивов?
Я примерно представляю, но как убрать лишнее по углам тогда

Не по теме:

чегооо!?

0
zhundik
0 / 0 / 1
Регистрация: 12.03.2014
Сообщений: 61
17.08.2018, 15:06  [ТС] 3
Цитата Сообщение от andyyy Посмотреть сообщение
чегооо!?
=) в каждом углу делам по набору дивов, тем же способом что и выше( например, 10) получается своего рода пирамида по углам. Как убрать половину чтобы остались только углы?
0
andyyy
598 / 197 / 111
Регистрация: 26.05.2016
Сообщений: 1,419
17.08.2018, 15:30 4
обернуть в див - опасити 0, а сами углы - опасити 1
0
koders
141 / 92 / 34
Регистрация: 15.07.2016
Сообщений: 305
17.08.2018, 15:32 5
Чем не подходит border-radius, что нужно городить костыли?
0
zhundik
0 / 0 / 1
Регистрация: 12.03.2014
Сообщений: 61
17.08.2018, 16:48  [ТС] 6
Цитата Сообщение от andyyy Посмотреть сообщение
обернуть в див - опасити 0, а сами углы - опасити 1
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" /> 
 
 <style>
 
 .v1, .v2, .v3, .v4, .v5 {
        height: 1px;
        font-size: 1px;
        display: block;
        overflow: hidden;
        border-width: 0 1px;
        border-style: solid;
        border-width: 0 1px;
    }
    .v1 {margin: 0 5px; border-color:red;}
    .v2 {margin: 0 4px; border-color:red;}
    .v3 {margin: 0 3px; border-color:red;}
    .v4 {margin: 0 2px; border-color:red;}
    .v5 {margin: 0 1px; border-color:red;}
 
 </style>
 
 </head>
 <body>
 <div style="width:200px;">
    
    
    
    
    
    
    <div style="width:12px; opacity:0;";>
    <div class="v1" style="opacity:1;";></div><div class="v2"></div><div class="v3"></div><div class="v4"></div><div class="v5"></div> 
    </div>
    
    
    
    <div style="padding:20px; background:#CCC;">
       текст
    </div>
    
    
    
    <div class="v5"></div><div class="v4"></div><div class="v3"></div><div class="v2"></div><div class="v1"></div>
</div>
   
</body>
</html>
не пойму где ошибка((

Добавлено через 2 минуты
Цитата Сообщение от koders Посмотреть сообщение
Чем не подходит border-radius, что нужно городить костыли?
необходим именно такой способ , к сожалению
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 428
17.08.2018, 18:21 7
А что за задача стоит?
0
zhundik
0 / 0 / 1
Регистрация: 12.03.2014
Сообщений: 61
17.08.2018, 18:49  [ТС] 8
Цитата Сообщение от Дмитрий Дмитрий Посмотреть сообщение
А что за задача стоит?
сделать закругления на Div-ax , без картинок, чтобы можно если что менять высоту и тд
что-то типа этого пока набросал, но не уверен
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" /> 
  <title>Справочник HTML</title>
 <style>
  body{margin-top:170px;
     margin-left:270px;
     margin-right:170px;}
 .v1, .v2, .v3, .v4, .v5,.v0,
 .v6, .v7, .v8, .v9, .v10, .v11, .v12,
 .v13, .v14, .v15, .v16, .v17, 
 .v18, .v19, .v20, .v21, .v22,
  .v23, .v24, .v25  
    {
        height: 1px;
        font-size: 1px;
        display: block;
        overflow: hidden;
        border-width: 0 1px;
        border-style: solid;
        border-width: 0 1px;
    }
    .v1 {margin: 0 5px; border-color:red;}
    .v2 {margin: 0 4px; border-color:red;}
    .v3 {margin: 0 3px; border-color:red;}
    .v4 {margin: 0 2px; border-color:red;}
    .v5 {margin: 0 1px; border-color:red;}
    .v6 {margin: 0 6px; border-color:red;}
    .v7 {margin: 0 7px; border-color:red;}
    .v8 {margin: 0 8px; border-color:red;}
    .v9 {margin: 0 9px; border-color:red;}
    .v10 {margin: 0 10px; border-color:red;}
    .v11 {margin: 0 11px; border-color:red;}
    .v12 {margin: 0 12px; border-color:red;}
    .v13 {margin: 0 13px; border-color:red;}
    .v14 {margin: 0 14px; border-color:red;}
    .v15 {margin: 0 15px; border-color:red;}
    .v16 {margin: 0 16px; border-color:red;}
    .v17 {margin: 0 17px; border-color:red;}
    .v18 {margin: 0 18px; border-color:red;}
    .v19 {margin: 0 19px; border-color:red;}
    .v20 {margin: 0 20px; border-color:red;}
    .v21 {margin: 0 21px; border-color:red;}
    .v22 {margin: 0 22px; border-color:red;}
    .v23 {margin: 0 23px; border-color:red;}
    .v24 {margin: 0 24px; border-color:red;}
    .v25 {margin: 0 25px; border-color:red;}
    
    .v0 {
        margin: 0 26px;
        background:green;
        border: none;
        
        }
    
    
 </style>
 
 </head>
 <body>
 <div style="width:500px;">
    
    
    
    
    <!-- top-left -->
    
    <div style="width:25px; overflow:hidden; float:left;  ";>
        <div style="width:100px;">
        <div class="v25"></div>
        <div class="v24"></div>
        <div class="v23"></div>
        <div class="v22"></div>
        <div class="v21"></div>
        <div class="v20"></div>
        <div class="v19"></div>
        <div class="v18"></div>
        <div class="v17"></div>
        <div class="v16"></div>
        <div class="v15"></div>
        <div class="v14"></div>
        <div class="v13"></div>
        <div class="v12"></div>
        <div class="v11"></div>
        <div class="v10"></div>
        <div class="v9"></div>
        <div class="v8"></div>
        <div class="v7"></div>
        <div class="v6"></div>
        <div class="v1"></div><div class="v2"></div><div class="v3"></div><div class="v4"></div><div class="v5"></div> 
    
        </div>
    </div>
        <!-- top-left -->
        
        <!-- top -->
            <div style="width:450px; background:yellow; float:left; margin:0px;"> 
            <div class="v0"> </div>
            </div>
        <!-- top -->
        
        <!-- top-right -->
    
    <div style="width:25px; overflow:hidden; background:red; float:left; ">
        
        <div style="width:60px; background:green; margin-left:-33px;">
        <div class="v25"></div>
        <div class="v24"></div>
        <div class="v23"></div>
        <div class="v22"></div>
        <div class="v21"></div>
        <div class="v20"></div>
        <div class="v19"></div>
        <div class="v18"></div>
        <div class="v17"></div>
        <div class="v16"></div>
        <div class="v15"></div>
        <div class="v14"></div>
        <div class="v13"></div>
        <div class="v12"></div>
        <div class="v11"></div>
        <div class="v10"></div>
        <div class="v9"></div>
        <div class="v8"></div>
        <div class="v7"></div>
        <div class="v6"></div>
        <div class="v1"></div><div class="v2"></div><div class="v3"></div><div class="v4"></div><div class="v5"></div> 
    
        </div>
    </div>
        
        <!-- top-right -->
        
        <!-- center -->
    
    <div style="padding:20px; background:#CCC; border-left: 1px solid red;  float:left;">
        результат пиксельного скругление работающий во всех браузерах
    </div>
    
        <!-- center -->
        
        <!-- bottom-left -->
    <div style="width:25px; overflow:hidden; float:left;  ";>
        <div style="width:100px;"> 
        
    
        <div class="v5"></div><div class="v4"></div><div class="v3"></div><div class="v2"></div><div class="v1"></div>
        <div class="v6"></div>
        <div class="v7"></div>
        <div class="v8"></div>
        <div class="v9"></div>
        <div class="v10"></div>
        <div class="v11"></div>
        <div class="v12"></div>
        <div class="v13"></div>
        <div class="v14"></div>
        <div class="v15"></div>
        <div class="v16"></div>
        <div class="v17"></div>
        <div class="v18"></div>
        <div class="v19"></div>
        <div class="v20"></div>
        <div class="v21"></div>
        <div class="v22"></div>
        <div class="v23"></div>
        <div class="v24"></div>
        <div class="v25"></div>
    
        </div>
    </div>
    
    <!-- BOTTOM - LEFT -->
    
    <!-- BOTTOM -->
    <div style="width:450px; background:yellow; float:left; margin:0px;"> 
            nffff
     </div>
    
    
    
</div>
   
</body>
</html>
0
tilda_2311
-1 / 1 / 1
Регистрация: 17.08.2018
Сообщений: 74
17.08.2018, 22:33 9
диву задаёшь border-radius: X px, и overflow: hidden, чтоб не было такого как размытия
0
17.08.2018, 22:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.08.2018, 22:33

CSS трансформирование углов
Доброго времени суток! Возник такой вопрос. Если взглянуть на логотип WIN 8, то...

Скругление углов фигур на CSS
Вопрос по геометрическим фигурам. Есть стандартный пример...

Скругление углов, используя CSS
Здравтвуйте - использую CSS для скругления углов Таким образом: #radius...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru