Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
matadora
1 / 1 / 0
Регистрация: 23.10.2010
Сообщений: 65
#1

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

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

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

как сделать такой шрифт средствами css? - HTML, CSS
как сделать такой шрифт средствами css?

Как средствами css можно сделать табличку? - HTML, CSS
Доброго времени суток! Как средствами css можно сделать табличку? если не трудно могли бы показать код?) я пробовал сделать обычную...

Как сделать вогнутые линии для div средствами CSS? - HTML, CSS
Как сделать "выгиб внутрь" линий вот такой для блочного элемента (как на скриншоте ниже)? С помощью iframe#video { transform:...

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

Можно ли средствами html/css сделать текст вертикальным - HTML, CSS
Дизайнер нарисовал, а заказчик утвердил макет сайта с вертикально ориентированными ценниками (т.е. текст повернут на 90 градусов). Я...

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

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

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

вот сервис, возможно пригодится : _http://editor.method.ac/
0
bodya_men
Нарушитель
44 / 52 / 7
Регистрация: 01.07.2014
Сообщений: 1,007
Завершенные тесты: 3
11.06.2015, 19:10 #6
evikza, либо inkscape.Можно и Canvas
0
matadora
1 / 1 / 0
Регистрация: 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
0 / 0 / 0
Регистрация: 18.12.2013
Сообщений: 108
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 / 0
Регистрация: 23.10.2010
Сообщений: 65
11.06.2015, 20:41  [ТС] #9
TheRock17, не работает, пропадает вообще фигура
0
Игор35
23 / 23 / 2
Регистрация: 26.08.2013
Сообщений: 334
12.06.2015, 14:51 #10
То?
1
evikza
371 / 223 / 118
Регистрация: 20.05.2015
Сообщений: 490
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 - HTML, CSS
Форма подписки выполнена вот таким образом - когда страницу прокручивают полностью, тогда и всплывает эта форма. Нюанс в том, что для...

Как правильно описать таблицу средствами CSS ? - HTML, CSS
Простейшая таблица: &lt;div align=&quot;center&quot;&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Первая&lt;/td&gt; &lt;td&gt;Вторая&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ...

Как грамотно верстать страницу средствами CSS? - HTML, CSS
Я прежде делал верстку с помощью таблиц и по сей день не могу перейти на нормальную. Подскажите, как это делается? Например, нужна...

Как сделать вот такой макет через html и css (div и css) - HTML, CSS
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По...


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

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

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