Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
matadora
1 / 1 / 1
Регистрация: 23.10.2010
Сообщений: 65
1

Как сделать фигуру средствами css?

11.06.2015, 17:34. Просмотров 661. Ответов 10
Метки нет (Все метки)

как сделать с помощью css и его градиента такую фигуру?
0
Миниатюры
Как сделать фигуру средствами css?  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.06.2015, 17:34
Ответы с готовыми решениями:

Как сделать фигуру через css
Здравствуйте форумчани!Помогите плис сделать фигуру через css (прикрепленный...

Как сделать вот такую фигуру на CSS?
Пробовал с border-radius: 999px 0 0 0; но у меня вечно какие то 70px прямая...

Как средствами css можно сделать табличку?
Доброго времени суток! Как средствами css можно сделать табличку? если не...

Как сделать такой шрифт средствами css?
как сделать такой шрифт средствами css?

Как сделать вогнутые линии для div средствами CSS?
Как сделать "выгиб внутрь" линий вот такой для блочного элемента (как на...

10
bodya_men
Нарушитель
44 / 52 / 8
Регистрация: 01.07.2014
Сообщений: 1,007
Завершенные тесты: 3
11.06.2015, 17:57 2
matadora, вроде свойства для таких форм есть.

Добавлено через 31 секунду
border-radius
0
matadora
1 / 1 / 1
Регистрация: 23.10.2010
Сообщений: 65
11.06.2015, 18:44  [ТС] 3
bodya_men, насколько мне известно, радиус отвечает за скругление углов а мне нужно именно ребра фигуры закосить. вершины отдельно как-то прописать...
кстати, по поводу border-radius есть очень полезная штучка http://border-radius.com/
0
bodya_men
Нарушитель
44 / 52 / 8
Регистрация: 01.07.2014
Сообщений: 1,007
Завершенные тесты: 3
11.06.2015, 18:45 4
matadora, html-book.Вообще такая фигура скорее всего в SVG.
0
evikza
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 517
11.06.2015, 18:57 5
matadora, да, это нужно делать по средствам svg (векторная графика)

вот сервис, возможно пригодится : _http://editor.method.ac/
0
bodya_men
Нарушитель
44 / 52 / 8
Регистрация: 01.07.2014
Сообщений: 1,007
Завершенные тесты: 3
11.06.2015, 19:10 6
evikza, либо inkscape.Можно и Canvas
0
matadora
1 / 1 / 1
Регистрация: 23.10.2010
Сообщений: 65
11.06.2015, 20:01  [ТС] 7
кароче, как-то так (без заливки градиента пока что)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.trapezoid {
    margin:0;
    padding: 0;
    border-bottom: 140px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 400px;
     -moz-transform: rotate(180deg); /* Для Firefox */
    -ms-transform: rotate(180deg); /* Для IE */
    -webkit-transform: rotate(180deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(180deg); /* Для Opera */
    transform: rotate(180deg);
}
HTML5
1
2
3
4
<div style="margin:30px">
    <div class="trapezoid">
    </div>
</div>
Добавлено через 4 минуты
а кто знает как добавить градиент фигурке?
0
TheRock17
-30 / 1 / 1
Регистрация: 18.12.2013
Сообщений: 187
11.06.2015, 20:17 8
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.trapezoid {
position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
    background:
        -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%,
        rgba(255,255,255,.1) 100%);
    background:
        -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,rgba(255,255,255,0.7)),
        color-stop(100%,rgba(255,255,255,.1)));
}
Попробуй так должно получится
0
matadora
1 / 1 / 1
Регистрация: 23.10.2010
Сообщений: 65
11.06.2015, 20:41  [ТС] 9
TheRock17, не работает, пропадает вообще фигура
0
Игор35
23 / 23 / 7
Регистрация: 26.08.2013
Сообщений: 334
12.06.2015, 14:51 10
То?
1
evikza
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 517
12.06.2015, 14:56 11
при помощи css это все реально гемаройно, и не факт что все это будет адекватно отображаться в разных браузерах

http://codepen.io/anon/pen/eNRPvQ

(как по мне, бросили бы Вы эту затею с css и воспользовались другими инструментами), либо у меня руки кривые
0
12.06.2015, 14:56
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.06.2015, 14:56

Сделать фон средствами css
Как сделать фон, как на картинке средствами css? Или лучше вставить его, как...

Можно ли средствами html/css сделать текст вертикальным
Дизайнер нарисовал, а заказчик утвердил макет сайта с вертикально...

Подскажите как можно сверстать такую фигуру через CSS
Подскажите как можно сверстать такую фигуру через CSS


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

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

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