Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Gvizl
7 / 7 / 2
Регистрация: 31.01.2014
Сообщений: 292
1

Как лучше сделать контейнер с горизонтальным треугольником справа?

13.01.2018, 21:11. Просмотров 741. Ответов 1
Метки нет (Все метки)

Как лучше сделать контейнер с горизонтальным треугольником справа? Притом нужно чтоб в одном случае блок был без обводки, а во-втором с обводкой. На картинках оба варианта наросованы. Сам я пока реализовал в 2 блока, где первый просто блок с обводкой, а второй картинка(где обводка)/ксс фигура(где без обводки) и блок-фигура смещён отриц марджином, но чёт не нравятся мне эти реализации

п.с абсолют не катит, ибо фигурная часть должна влиять на ширину всего блока
0
Миниатюры
Как лучше сделать контейнер с горизонтальным треугольником справа?  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.01.2018, 21:11
Ответы с готовыми решениями:

Нужно сделать трехстраничный сайт с горизонтальным скроллом
Приветствую всех. Немного сумбурно изложу тему) Вообщем обращаюсь за...

Как сделать рамку у таблице слева и справа, а сверху и снизу чтобы ее небыло?
Обычным способом рамка получается со всех сторон, А как сделать так, чтобы была...

Как сделать чтобы при уменьшении экрана меню слева и справа уходили вниз без js?
Ну, то есть, наверно, используя @media итд, это понятно. Как при уменьшении...

Как лучше сделать такие штрихи?
Здравствуйте! Подскажите, пожалуйста, как можно при верстке сделать такое...

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

1
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 182
13.01.2018, 21:47 2
Лучший ответ Сообщение было отмечено Gvizl как решение

Решение

Ну примерно так
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.w{
border: 1px solid red;
float: left;
 width: 100px;
height: 98px;
background: red;
text-align: center;
}
 
.s{
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
margin-left: 100px;
}
HTML5
1
2
<div class="w"><p><font size="10">10</font></p></div>
<div class="s"></div>
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.01.2018, 21:47

Сделать контейнер и подложку
В верстке недавно, подскажите пожалуйста. С левого края окна браузера...

Не могу сделать второй контейнер!
Помогите сделать второй контейнер для сайта Все что вам понадобиться...

Подскажите, как сделать лучше рекламный сайт, задание на html
Задание имеется, Разработать рекламный или промо сайт туристической фирмы...


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

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

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