Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 12.03.2018, 16:03   #1
Codemex
 
Регистрация: 12.03.2018
Сообщений: 3
По умолчанию [РЕШЕНО] Помогите создать такую штуковину (блоки с треугольным правым концом)

Всем привет подскажите, плз, как можно создать такую штуковину?
Пробую через псевдо :after, но получаются закрашенные стрелки после основного дива. Нужны именно такие очертания. Вроде ничего сложного должно быть, но голову сломал.

Код:
<div class="exp"></div>
<div class="exp"></div>

.exp {
    width: 200px;
    height: 150px;
    background: transparent;
    position: relative;
    outline: 1px solid #fff;
    outline-offset: 2px;
    display: inline-flex;
    text-align: left; 

}

.exp:after {
    content: '';
    width: 0;
    height: 0;
    left: 102%;
    top: 0;
    position: absolute;
    border-top: 75px solid transparent;
    border-left: 13px solid #ffffff;
    border-bottom: 75px solid transparent;
    
}
Спасибо.

Решение:
Цитата:
Сообщение от Codemex Посмотреть сообщение
Нашел решение, кому интересно тут http://jsfiddle.net/8Eh8G/
Изображения
Тип файла: jpg stukovina.jpg (27.7 Кб, 127 просмотров)

Последний раз редактировалось Вадим Мошев; 17.05.2018 в 23:37.
Codemex вне форума Ответить с цитированием
Старый 13.03.2018, 23:08   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Сделай картинкой на SVG и не парься. На CSS это мастер-класс.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.03.2018, 07:02   #3
Xo66um
Форумчанин
 
Регистрация: 11.05.2013
Сообщений: 154
По умолчанию

Если я правильно понял, то вам сюда (там и демо есть - можно посмотреть, и даже потыкать).
Xo66um вне форума Ответить с цитированием
Старый 14.03.2018, 08:43   #4
Codemex
 
Регистрация: 12.03.2018
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Xo66um Посмотреть сообщение
Если я правильно понял, то вам сюда (там и демо есть - можно посмотреть, и даже потыкать).
Спасибо. Вроде то, что нужно а дальше поколдую.
Codemex вне форума Ответить с цитированием
Старый 14.03.2018, 18:57   #5
СтудПом
Форумчанин
 
Регистрация: 08.11.2017
Сообщений: 347
По умолчанию

В CSS3 есть трансформация. Можно попробовать каждый блок сделать из двух по высоте частей. По причине отсутствия надобности и лени, точно не знаю как, но точно знаю что можно
СтудПом вне форума Ответить с цитированием
Старый 22.03.2018, 14:26   #6
Codemex
 
Регистрация: 12.03.2018
Сообщений: 3
По умолчанию

Нашел решение, кому интересно тут http://jsfiddle.net/8Eh8G/
Codemex вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать точь такую же? Fahman Общие вопросы Delphi 4 09.12.2013 18:48
Как создать такую форму? artemavd Общие вопросы Delphi 19 11.06.2012 22:06
как создать такую форму? ИНDИГО Общие вопросы Delphi 7 20.01.2012 14:12
Можно ли в делфи создать такую прогу... Алерон Общие вопросы Delphi 4 24.05.2010 20:10