CSS 3 Divs повернуты на 45 градусов
Я пытаюсь создать этот эффект:
Мне нужно, чтобы три цвета были 3 разными div:
<div>
<div id = "red"></div>
<div id = "blue"></div>
<div id = "green"></div>
</div>
3 div должны полностью заполнить своего родителя. Его родителем может быть другой div или даже полный размер окна. Вот поворот, который я пробовал, но он не полностью заполняет пространство.
#green {
height: 100%;
background-color: green;
width: 37.5%;
transform: rotate(45deg)
}
#red {
height: 100%;
background-color: red;
width: 25%;
transform: rotate(45deg)
}
#blue {
height: 100vh;
background-color: blue;
width: 37.5%;
transform: rotate(45deg)
}<div>
<div id = "red"></div>
<div id = "blue"></div>
<div id = "green"></div>
</div>
Ответы 2
body {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
#wrapper {
width: 20rem;
height: 20rem;
position: relative;
overflow: hidden;
}
#red, #blue, #green {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#red {
background: red;
transform: rotate(45deg) translatex(-75%);
}
#blue {
background: blue;
}
#green {
background: green;
transform: rotate(45deg) translatex(75%);
}<div id = "wrapper">
<div id = "blue"></div>
<div id = "red"></div>
<div id = "green"></div>
</div>Вы имеете в виду вот так?
Для этого я использовал css rotate и transform.
Да очень близко. Единственная проблема, которая у меня все еще была бы, - это если размер окна не является идеальным квадратом.
В будущем, пожалуйста, размещайте полный ответ здесь, а не на другом сайте.
Изменен ответ для использования внутренней функции фрагмента
Для этого можно использовать простой градиент:
.box {
width:150px;
height:150px;
background:
linear-gradient(to bottom right,red 35%,blue 35%,blue 65%,yellow 65%);
}<div class = "box">
</div>С 3 div вы можете попробовать, как показано ниже, с преобразованием:
.box {
width:150px;
height:150px;
position:relative;
overflow:hidden;
}
.box :first-child {
width:100%;
height:100%;
background:blue;
}
.box :nth-child(2),
.box :last-child {
position:absolute;
width:141%; /*sqrt(2)x100% */
height:141%;
}
.box :nth-child(2) {
top:0;
left:0;
background:red;
transform:rotate(45deg) translate(-90%);
}
.box :last-child {
bottom:0;
right:0;
background:yellow;
transform:rotate(45deg) translate(90%)
}<div class = "box">
<div></div>
<div></div>
<div></div>
</div>Вы можете легко добавить анимацию, используя первый метод, применяя несколько фонов:
.box {
width:150px;
height:150px;
background:
linear-gradient(to bottom right,red 50%,transparent 0),
linear-gradient(to top left ,yellow 50%,transparent 0),
blue;
background-size:200% 200%;
background-position:100% 100%,0 0;
transition:1s all;
}
.box:hover {
background-position:50% 50%;
}<div class = "box">
</div>также используя второй метод, регулируя значение перевода:
.box {
width:150px;
height:150px;
position:relative;
overflow:hidden;
}
.box :first-child {
width:100%;
height:100%;
background:blue;
}
.box :nth-child(2),
.box :last-child {
position:absolute;
width:141%; /*sqrt(2)x100% */
height:141%;
transition:1s all;
}
.box :nth-child(2) {
top:0;
left:0;
background:red;
transform:rotate(45deg) translate(calc(-1 * var(--p,120%)));
}
.box :last-child {
bottom:0;
right:0;
background:yellow;
transform:rotate(45deg) translate(var(--p,120%))
}
.box:hover{
--p:70%;
}<div class = "box">
<div></div>
<div></div>
<div></div>
</div>Он также может работать отзывчиво:
.box {
height:100vh;
background:
linear-gradient(to bottom right,red 50%,transparent 50.1%),
linear-gradient(to top left ,yellow 50%,transparent 50.1%),
blue;
background-size:200% 200%;
background-position:100% 100%,0 0;
transition:1s all;
}
.box:hover {
background-position:50% 50%;
}
body {
margin:0;
}<div class = "box">
</div>Подробнее о значениях, используемых с фоном: Использование процентных значений с фоновым положением на линейном градиенте.
Мне нужно 3 div для анимации позиций.
@Tom, проверьте обновление, можно поподробнее об анимации, которую вы хотите сделать?
3 цвета будут накладываться поверх контента и выдвигаться, открывая элементы позади него. Красный и зеленый элементы div будут скользить вниз слева, а синий — вверху справа. Контейнер также не будет идеальным квадратом. Например, это может быть размер окна мобильного телефона.
@Tom, затем проверьте последний, вам нужно только настроить значение перевода, чтобы создать необходимую анимацию.
@Tom также добавил примеры с анимацией
Я добавил свою попытку.