Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

Всем привет подскажите, плз, как можно создать такую штуковину?
Пробую через псевдо :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 Кб, 45 просмотров)

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

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

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

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

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

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать точь такую же? 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


18:24.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru