Как я просматриваю каналы RSS, как отформатировано XML?
Сначала давайте оставим ширину равной 100% и просто скорректируем начало преобразования, чтобы оно было:
body,
html {
width: 100vw;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(-20deg);
background: lime;
width: 50%;
height: 50%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(20deg);
transform-origin:top left;
height: 100%;
width: 100%;
background: pink;
opacity: 0.5
}
[ 1130]
Теперь мы должны удалить часть, выделенную красным, как показано ниже:
Рассматривая иллюстрацию, которую мы имеем tan(angle) = X/H где angle - угол перекоса (20deg), а H - высота и X, что мы ищем. Итак, нам нужно удалить H*tan(20deg) = 0.36369*H:
body,
html {
width: 100vw;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(-20deg);
background: lime;
width: 50%;
height: 50%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(20deg);
transform-origin:top left;
height: 100%;
width: calc(100% - 0.3639*50vh);
background: pink;
opacity: 0.5
}
Теперь, когда у нас есть хорошая ширина, мы исправляем положение :
body,
html {
width: 100vw;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(-20deg);
background: lime;
width: 50%;
height: 50%;
}
.child {
position: absolute;
top: 0;
left: 0;
transform: skew(20deg);
transform-origin:top left;
height: 100%;
width: calc(100% - 0.3639*50vh);
background: pink;
opacity: 0.5
}
Я не совсем уверен в назначении этой формы, но вот еще одна идея чтобы создать это без сложных вычислений:
body,
html {
width: 100vw;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
linear-gradient(to bottom right,transparent 49.8%,lime 50%) left/15% 100%,
linear-gradient(to top left ,transparent 49.8%,lime 50%) right/15% 100%,
linear-gradient(lime,lime) center/70% 100%;
background-repeat:no-repeat;
width: 50%;
height: 50%;
}
.child {;
height: 100%;
width:70%;
margin:auto;
background: pink;
opacity: 0.5
}
Вы просто должны сделать внутренний прямоугольник такой же ширины, как и центрированный градиент (в данном случае 70%), затем вы разделяете оставшийся градиент влево / вправо, что создаст треугольную форму.
Вы также можете легко применить анимацию:
body,
html {
margin:0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
linear-gradient(to bottom right,transparent 49.8%,lime 50%) left/15% 100%,
linear-gradient(to top left ,transparent 49.8%,lime 50%) right/15% 100%,
linear-gradient(lime,lime) center/70% 100%;
background-repeat:no-repeat;
width: 50%;
height: 50%;
transition:1s;
}
.child {;
height: 100%;
width:70%;
margin:auto;
background: pink;
opacity: 0.5;
transition:1s;
}
.container:hover {
background-size:0% 100%,0% 100%,100% 100%;
}
.container:hover .child{
width:100%;
}
2 ответа
При просмотре канала в Firefox, он будет читать как RSS-ридер, но если Вы просматриваете исходный код, у Вас есть он в формате XML. И можно получить обоих на MAC (если это - ОС, Вы обращаетесь к).
Блокнот XML делает достойное задание для (свободной) хорошей цены.
Вы можете также перетаскивать-отбрасывание файл в Chrome и нажимать CTRL+U.
Можно также использовать CMD +, Выбирают + U на Mac.