Только с CSS (нет js), можно ли повернуть div с фоновым изображением, а затем установить ширину и высоту, чтобы они соответствовали экрану? Можно ли это сделать без CSS SVG? Нет никакой особой причины, почему я не хочу SVG. Просто спрашивать, возможно ли это или нет.Повернуть, а затем изменить размер в зависимости от размера родителя
Я не возражаю против структуры HTML. Вы можете предложить так много DIV или контейнер
Вы могли бы добиться этого, как этот HTML
<body>
<div class="container">
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
<div class="grad4"></div>
</div>
</body>
CSS
body{
background:#000;
}
.container{
width:100vw;
height:100vh;
background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-145812.jpg');
background-size:cover;
}
.grad1{
float:left;
position:relative;
width:50%;
height:50%;
background: -webkit-linear-gradient(left top, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
.grad2{
float:right;
position:relative;
width:50%;
height:50%;
background: -webkit-linear-gradient(right top, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom left, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom left, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom left, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
.grad3{
float:left;
position:relative;
width:50%;
height:50%;
background: -webkit-linear-gradient(left bottom, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top right, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top right, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top right, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
.grad4{
float:right;
position:relative;
width:50%;
height:50%;
background: -webkit-linear-gradient(right bottom, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top left, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top left, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top left, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
Немного раздутый, но css, возможно, можно уменьшить вдвое с помощью преобразования. 100% отзывчивый. Он не будет работать в браузерах, которые не поддерживают градиенты. старых браузеров.
вы можете сделать алмаз с помощью CSS, как следующий
HTML
<div id="diamond"></div>
CSS
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
Я нашел и пример, что я думаю, что это похоже на вопрос, который у вас есть.
Мы не можем установить фон при использовании пограничного подхода. Во-вторых, мне нужно, чтобы алмаз соответствовал экрану, который не фиксировался с использованием пикселя размером 50 пикселей. Поэтому я предполагаю что-то вроде vh или% – Coisox
. Да, это только и пример, вы проверили код? в этом примере он использует некоторые изображения внутри алмаза – Ronald
Да, я проверил кодировку, но ни одна из них не соответствует моим требованиям. Мне нужно, чтобы алмаз динамически соответствовал размеру видового экрана или размеру родителя. Я имею в виду, если открыть с использованием 1080x768 или 1900x1600, алмаз будет соответствовать – Coisox
Да, это возможно.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="flip3D">
<div class="back"></div>
<div class="front"></div>
</div>
</body>
</html>
CSS
.flip3D{ width:240px; height:200px;float:left; }
.flip3D > .front{
position:absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
background:url(right1.png); width:240px; height:200px; border-radius: 7px;
background-size:100% 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position:absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
transform: perspective(600px) rotateY(180deg);
background: url(right1.png); width:100%; height:100%; border-radius: 7px;
background-size:100% 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
-webkit-transform: perspective(600px) rotateY(-180deg);
transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover > .back{
-webkit-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
}
Вот мой результат после использования ur кода http://i.imgur.com/UK988cl.png. Его скошенный прямоугольник не алмаз подходит для размера экрана – Coisox
Эй, у меня есть немного ближе, устанавливая высоту и ширину на то же самое. но я не думаю, что это будет полноэкранный режим в обоих измерениях. Ваши вопросы сложнее, чем казалось на первый взгляд. – Buts
Хорошо, я работал с градиентами. – Buts