Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> 2 прозрачных блока не перекрывающих друг друга
Lightt  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 326
Пользователь №: 27208
На форуме: 5 лет, 7 месяцев, 29 дней
Карма: 11




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

https://jsfiddle.net/h5zhju8n/

user posted image

.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before {
border-left: 1px solid;
border-bottom: 1px solid;
border-top: 1px solid;
position: absolute;
background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}


.heart:after {
border-right: 1px solid;
border-top: 1px solid;
position: absolute;
background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}


<div class="heart"></div>


PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
TranceIT  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



...Один я одинаковый...
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1731
Пользователь №: 19760
На форуме: 7 лет, 17 дней
Карма: 58




Напомнило...
https://www.youtube.com/watch?v=mhofVKGZIyI

В смысле дополнял? На изображении желаемый результат?


--------------------
Безвозмездно помогаю только тем, кто сам пытается что-то сделать.

Остальным за WMR
Даже если там 10 строк кода!
Даже если мне это ничего не стоит!
Даже если вы нуб!

user posted image
PM
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса