Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
0 / 0 / 0
Регистрация: 19.01.2016
Сообщений: 2

Фигура+сглаженные углы

19.01.2016, 23:37. Показов 2797. Ответов 9
Метки css3, hexagon, углы (Все метки)
Студворк — интернет-сервис помощи студентам
Доброго времени суток уважаемые форумчане.Помогите в таком вопросе:на чистом css нужно создать следующую фигуру-шестигранник,но со сглаженными углами.
Название: hex.png Просмотров: 42 Размер: 4.9 Кб
Буду благодарен любой помощи,особенно оперативной.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 19.01.2016, 23:37
Ответы с готовыми решениями:

Сглаженные линии на графике
Доброго времени суток! Подскажите, как можно сделать линии на графике сглаженными? Есть 3 массива значений, по ним строятся графики, но...

Полярные координаты. Как рассчитать полярные углы (углы поворотов) для определенной точки
у меня такая проблема - есть два отрезка (точнее полярные оси) соедененые между собой . первый полюс всегда находится на одном месте а...

Получить "сглаженные" значения элементов последовательности
https://www.cyberforum.ru/pascal/thread63826.html как решить эту задачу, если массивы использовать нельзя?

9
16 / 16 / 3
Регистрация: 03.01.2015
Сообщений: 115
20.01.2016, 09:13
Кликните здесь для просмотра всего текста
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

<div class="hexa">
            <div class="hexa_text"><h2>60</h2>часов лекций</div>
            <div class="hexa_image"></div>
            <div class="hexagon scale_0">
              <div class="h_sq t_sq_1 color_0"></div>
              <div class="h_sq t_sq_2 color_0"></div>
              <div class="h_sq t_sq_3 color_0"></div>
              <div class="h_sq t_sq_4 color_0"></div>
              <div class="h_sq t_sq_5 color_0"></div>
              <div class="h_sq t_sq_6 color_0"></div>
            </div>
            <div class="hexagon scale_1">
              <div class="h_sq t_sq_1 color_1"></div>
              <div class="h_sq t_sq_2 color_1"></div>
              <div class="h_sq t_sq_3 color_1"></div>
              <div class="h_sq t_sq_4 color_1"></div>
              <div class="h_sq t_sq_5 color_1"></div>
              <div class="h_sq t_sq_6 color_1"></div>
            </div>
            <div class="hexagon scale_2">
              <div class="h_sq t_sq_1 color_2"></div>
              <div class="h_sq t_sq_2 color_2"></div>
              <div class="h_sq t_sq_3 color_2"></div>
              <div class="h_sq t_sq_4 color_2"></div>
              <div class="h_sq t_sq_5 color_2"></div>
              <div class="h_sq t_sq_6 color_2"></div>
            </div>
            <div class="hexagon scale_3">
              <div class="h_sq t_sq_1 color_3"></div>
              <div class="h_sq t_sq_2 color_3"></div>
              <div class="h_sq t_sq_3 color_3"></div>
              <div class="h_sq t_sq_4 color_3"></div>
              <div class="h_sq t_sq_5 color_3"></div>
              <div class="h_sq t_sq_6 color_3"></div>
            </div>
      </div>
и
Кликните здесь для просмотра всего текста
CSS
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

.hexa {position:relative;float:left;margin-left:142px;margin-top:40px;-webkit-transition: 1s;webkit-transform-origin:50% 50%;
  -webkit-animation-timing-function: linear;}
 
.hexagon {position:absolute;}
.scale_0 {z-index:10;-o-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-sand-transform: rotate(0.6,0.6);-webkit-transform: scale(0.6,0.6);transform: scale(0.6,0.6);left:0px;top:0px;}
.scale_1 {z-index:20;-o-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-sand-transform: rotate(0.6,0.6);-webkit-transform: scale(0.6,0.6);transform: scale(0.6,0.6);left:0px;top:0px;}
.scale_2 {z-index:30;-o-transform: scale(0.58,0.58);-ms-transform: scale(0.58,0.58);-sand-transform: rotate(0.58,0.58);-webkit-transform: scale(0.58,0.58);transform: scale(0.58,0.58);left:2px;top:1px;}
.scale_3 {z-index:40;-o-transform: scale(0.55,0.55);-ms-transform: scale(0.55,0.55);-sand-transform: rotate(0.55,0.55);-webkit-transform: scale(0.55,0.55);transform: scale(0.55,0.55);left:4px;top:2px;}
 
.hexa h2 {margin:0px;vertical-align:middle;color:#524652;font-size:240%;margin-top:-16px;font-weight:normal;}
.hexa {color:#524652;font-size:90%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.hexa_text {cursor:pointer;vertical-align:middle;position:absolute;z-index:50;color:#000;left:0px;top:0px;text-align:center;width:102px;height:60px;-webkit-transition: 1s;}
.hexa_image {position:absolute;z-index:60;width:114px;left:-5px;height:130px;top:-45px;
background-position: 3px 5px;
background-repeat: no-repeat;
}
 
.color_3 {background-color:#fff;}
.color_2 {background-color:#fc4858;}
.color_1 {background-color:#b91111;}
.color_0 {background-color:#fff;box-shadow:0px 0px 3px #888;}
.color_1_blue {background-color:#3769af;}
.color_2_blue {background-color:#00ace5;}
 
.color_1_green {background-color:#799319;}
.color_2_green {background-color:#8fbf2f;}
 
.color_1_yellow {background-color:#e68020;}
.color_2_yellow {background-color:#ffb307;}
 
.h_sq {position:absolute;border-radius:10px;width:114px;height:114px;}
.t_sq_1 {left:10px;top:10px;z-index:11;-o-transform: rotate(120deg);-sand-transform: rotate(120deg);-ms-transform:rotate(120deg);-webkit-transform:rotate(120deg);transform:rotate(120deg);}
.t_sq_2 {left:48px;top:10px;z-index:11;-o-transform: rotate(60deg);-sand-transform: rotate(60deg);-ms-transform:rotate(60deg);-webkit-transform:rotate(60deg);transform:rotate(60deg);}
.t_sq_3 {left:67px;top:-23px;z-index:12;}
.t_sq_4 {left:10px;top:-57px;z-index:13;-o-transform: rotate(-120deg);-sand-transform: rotate(-120deg);-ms-transform:rotate(-120deg);-webkit-transform:rotate(-120deg);transform:rotate(-120deg);}
.t_sq_5 {left:-9px;top:-23px;z-index:10;}
.t_sq_6 {left:48px;top:-57px;z-index:12;-o-transform: rotate(-60deg);-sand-transform: rotate(-60deg);-ms-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);transform:rotate(-60deg);}
разбирайтесь наздоровье)
0
0 / 0 / 0
Регистрация: 19.01.2016
Сообщений: 2
20.01.2016, 09:48  [ТС]
Spirt Tesla, Спасибо за отклик,но в построении самой фигуры проблематики не возникает,уже разобрался,а вот сгладить углы-это уже проблема.Подскажите плз - в Вашем коде какие параметры отвечают за эту характеристику фигуры?
0
 Аватар для Protos73
7 / 6 / 7
Регистрация: 10.08.2015
Сообщений: 63
20.01.2016, 09:50
Ну почти получилось. Можешь попробовать добавить before и after ширину пикселя на 2.

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

<html>
<body>
<style>
#hexagon {
    border-radius: 5px;
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    border-radius: 10px;
    content: "";
    position: absolute;
    top: -23px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    border-radius: 10px;
    content: "";
    position: absolute;
    bottom: -23px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}
</style>
<br>
<div id="hexagon">
</div>
</body>
</html>
0
16 / 16 / 3
Регистрация: 03.01.2015
Сообщений: 115
20.01.2016, 13:00
Цитата Сообщение от InTheDark Посмотреть сообщение
Spirt Tesla, Спасибо за отклик,но в построении самой фигуры проблематики не возникает,уже разобрался,а вот сгладить углы-это уже проблема.Подскажите плз - в Вашем коде какие параметры отвечают за эту характеристику фигуры?
вообще за сглаживание отвечает border-radius
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
31.01.2016, 23:22
Может кому пригодится...
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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hex</title>
    <style>
    .hex {
    width:140px;
    height:86px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;           
    -webkit-background-size: auto 173px;                            
    -moz-background-size: auto 173px;                           
    -ms-background-size: auto 173px;                            
    -o-background-size: auto 173px;                         
    position: relative;
    float:left;
    text-align:center;
    margin-left:5px;
    zoom:1;
    border-radius:10px
}
 
.hex.hex-1.hex-gap:hover{background:blue}
    
    .hex.hex-gap {
        margin-left: 86px;
        margin-top:50px;
    }
 
    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;                                
        z-index:-2;                     
        overflow:hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;         
        backface-visibility: hidden;
        border-radius:10px
    }
    
    .hex .corner-1 {
        z-index:-1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    
        
    }
    
    .hex .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
 
    }
    
    .hex.hex-1 {
        background: #74cddb;
    }
    
    a{text-decoration:none; display:block; text-align:center; vertical-align:middle; font:14px/86px Tahoma}
    </style>
</head>
<body>
    <div class="hex hex-1 hex-gap">     
        <div class="inner"><a href="#">Кнопка</a></div>       
        <div class="corner-1"></div>
        <div class="corner-2"></div>        
    </div>
</body>
</html>
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
01.02.2016, 06:42
гиф картинка будет весить меньше, чем весь ваш код
ИМХО
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
01.02.2016, 10:48
Цитата Сообщение от newJS Посмотреть сообщение
гиф картинка будет весить меньше, чем весь ваш код
Возможно... Не пробовал... Тогда не имеет смысла вообще что-то верстать, ведь каждый элемент шаблона можно вставить гифкой и не парится, ИМХО...
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
02.02.2016, 07:18
Цитата Сообщение от Fedor92 Посмотреть сообщение
Тогда не имеет смысла вообще что-то верстать
Фёдор, то что заменить можно, ещё не значит что нужно, палку не перегибай.


А то что есть разные варианты, это хорошо, пусть каждый своё выбирает.
0
02.02.2016, 11:02

Не по теме:

Цитата Сообщение от newJS Посмотреть сообщение
палку не перегибай
И не перегибаю... Это типа ирония...:)
Цитата Сообщение от newJS Посмотреть сообщение
А то что есть разные варианты, это хорошо, пусть каждый своё выбирает.
Абсолютно согласен... :drink:

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 02.02.2016, 11:02
Помогаю со студенческими работами здесь

Получить "сглаженные" значения a1,., a50, заменив в исходной последовательности все члены, кроме первого и последнего
Даны действительные числа a1,..., a50. Получить &quot;сглаженные&quot; значения a1,..., a50, заменив в исходной последовательности все члены, кроме...

3D Фигура в C#
Есть координаты трехмерной фигуры. Надо вывести эту фигуру на форму, чтобы получилось что-то типа такого(на картинке изображена сама...

3d фигура
Необходимо построить фигуру, ограниченную плоскостями: x^2+y^2-z^2=0, x^2+y^2+z=3, z=0. Я построил графики, но не знаю что делать дальше....

Фигура в 3d
Не могу сделать фаску.

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


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
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
/ * Дана цепь постоянного тока с 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/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru