X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Разделение двух картинок по диагонали
Anshag
Anshag
Topic Starter сообщение 14.2.2018, 20:13; Ответить: Anshag
Сообщение #1


Доброе время суток.
Помогите решить задачу:
Необходимо сделать баннер из 2х картинок, разделенных по диагонали (как в примере), при нажатии на любую из которых, пользователь будет попадать на новую страницу (открываемую в новой вкладке)
Буду очень благодарен за помощь.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.container{
width:100%;
position: relative;
}
.container:after{
content: "";
position: absolute;
display: block;
top:0; left:0; right:0; bottom:0;
background: linear-gradient(-51deg, transparent 63%, #AF9CFF 0);
}
img{
width:100%;
max-height: 100%
}

</style>
</head>
<body>
<div class="container">
<div class="row">
<img src="http://classpic.ru/wp-content/uploads/Devushka-v-golubom-plate.jpg" alt="" class="img-responsive">
</div>
</div>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 15.2.2018, 12:28; Ответить: Degradator
Сообщение #2


Никогда такого не делал, пробуй что-то отсюда - https://stackoverflow.com/questions/2925993...nally-with-css3
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Anshag
Anshag
Topic Starter сообщение 15.2.2018, 13:50; Ответить: Anshag
Сообщение #3


(Degradator @ 15.2.2018, 15:28) *
Никогда такого не делал, пробуй что-то отсюда - https://stackoverflow.com/questions/2925993...nally-with-css3

все, что я находил - это обрезанная картинка на фоне
А нужно именно 2 (или более) картинки, накладывающиеся друг на друга с косой границей.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 16.2.2018, 11:23; Ответить: Degradator
Сообщение #4


Плохо искал, здесь https://stackoverflow.com/questions/2925993...nally-with-css3 - самый первый пример выглядит правильно.

http://jsfiddle.net/r3p9ph5k/598/

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как првильно указать слова для рекламы в Google на двух языках
1 Nekit 907 12.2.2024, 23:58
автор: malamut
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыБольшие различия в двух CPA-сетях
3 karusel 784 20.3.2019, 16:42
автор: karusel
Открытая тема (нет новых ответов) Напишу и размещу статью с вечными ссылками и продублирую в двух соц.группах
0 DrumON 1454 23.1.2019, 20:32
автор: -DrumON-
Открытая тема (нет новых ответов) [ИЩУ] Человека для сбора картинок
4 rokot 3214 4.9.2018, 10:05
автор: Том77
Открытая тема (нет новых ответов) Статейные ссылки на двух площадках с трастом 100 и общим ТИЦ 15700
5 freeax 3616 16.8.2018, 22:20
автор: freeax


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:12
Дизайн