Вопросы Теги

Размер прямоугольника внутри перекошенного контейнера

Дети всегда будут помнить секреты, которые они поделили с родителями, даже после того, как их родители ушли. Это то, что закрывает для функций.

Секреты функций JavaScript - это частные переменные 

var parent = function() {
 var name = "Mary"; // secret
}

Каждый раз, когда вы вызываете его, локальная переменная «name» создал и получил имя «Мэри». И каждый раз, когда функция выходит из переменной, теряется и имя забывается.

Как вы можете догадаться, поскольку переменные повторно создаются каждый раз, когда функция вызывается, и никто их не узнает, должно быть секретным местом, где они хранятся. Его можно было бы назвать Тайной Палатой или стек или местный охват, но это не имеет большого значения. Мы знаем, что они где-то скрыты в памяти.

Но в JavaScript есть особая вещь, что функции, созданные внутри других функций, также могут знать локальные переменные своих родителей и поддерживать если они живут. 

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

Итак, до тех пор, пока мы находимся в родительской -функции, он может создать одну или несколько дочерних функций, которые разделяют секретные переменные из секретного места.

Но печально, что если дочерний элемент также является частной переменной его родительской функции, он также погибнет, когда родитель закончится, и секреты будут умирать вместе с ними.

So чтобы жить, ребенок должен уйти, пока не стало слишком поздно 

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside

И теперь, хотя Мэри «больше не работает», память о ней не потеряна, и ее ребенок всегда будет помнить ее имя и другие секреты, которые они делили в течение их времени вместе.

Итак, если вы позвоните ребенку «Алиса», она ответит 

child("Alice") => "My name is Alice, child of Mary"

. Это все, что нужно сказать.

2
задан Temani Afif 22 March 2019 в 14:37
поделиться

2 ответа

Это не совсем та структура, о которой вы просили, но похожая, и она не требует сложных вычислений.

Принцип должен заключаться в том, чтобы ребенок не попадал в перекошенный блок, а находился сверху, поскольку вы находитесь в абсолютном положении. Таким образом, у нас будет 3 блока одинакового размера. Если вы наклоните 2 блока позади, вы получите только половину треугольников. Чтобы получить полные треугольники, вы можете играть с transform-origin, и вы можете достичь следующего: 

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  width: 50%;
  height: 50%;
  opacity:0.7;
}

.container-l,
.container-r {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  transform-origin:50% 0%;
  width: 50%;
  height: 50%;
}
.container-l {
  transform-origin:50% 100%;
  background: lime;
}
.container-r {
  transform-origin:50% 0%;
  background: green;
}
<div class="container-r">
</div>
<div class="container-l">
</div>
<div class="container">
  <div class="child"></div>
</div>

0
ответ дан Jean 22 March 2019 в 14:37
поделиться

Сначала давайте оставим ширину равной 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
}
<div class="container">
  <div class="child"></div>
</div>
[ 1130]

Теперь мы должны удалить часть, выделенную красным, как показано ниже:

enter image description here

Рассматривая иллюстрацию, которую мы имеем 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
}
<div class="container">
  <div class="child"></div>
</div>

Теперь, когда у нас есть хорошая ширина, мы исправляем положение : 

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
}
<div class="container">
  <div class="child"></div>
</div>

Я не совсем уверен в назначении этой формы, но вот еще одна идея чтобы создать это без сложных вычислений: 

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
}
<div class="container">
  <div class="child"></div>
</div>

Вы просто должны сделать внутренний прямоугольник такой же ширины, как и центрированный градиент (в данном случае 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%;
}
<div class="container">
  <div class="child"></div>
</div>

0
ответ дан Temani Afif 22 March 2019 в 14:37
поделиться