Максимальное количество дочерних объектов на узле js
Вот еще один подход, использующий CSS transform: skew(45deg) для создания эффекта углового угла. Сама форма включает в себя три элемента (1 реальный и 2 псевдоэлемента) следующим образом:
- Элемент основного контейнера
divимеетoverflow: hiddenи создает левую границу. - Псевдоэлемент
:before, который составляет 20% высоты родительского контейнера и имеет привязку к нему. Этот элемент создает границу на верхней и наклонной границе справа. - Псевдоэлемент
:after, который составляет 80% высоты родителя (в основном, оставшейся высоты) и производит нижняя граница, оставшаяся часть правой границы.
Полученный результат реагирует, создает прозрачный разрез сверху и поддерживает прозрачные фоны.
div {
position: relative;
height: 100px;
width: 200px;
border-left: 2px solid beige;
overflow: hidden;
}
div:after,
div:before {
position: absolute;
content: '';
width: calc(100% - 2px);
left: 0px;
z-index: -1;
}
div:before {
height: 20%;
top: 0px;
border: 2px solid beige;
border-width: 2px 3px 0px 0px;
transform: skew(45deg);
transform-origin: right bottom;
}
div:after {
height: calc(80% - 4px);
bottom: 0px;
border: 2px solid beige;
border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
background-color: beige;
}
/* Just for demo */
div {
float: left;
color: beige;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
div.filled{
color: black;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}Some content
Some content Ниже приведен другой способ создания эффекта углового угла с помощью linear-gradient фоновые изображения. Используется комбинация трех градиентных изображений (приведенных ниже):
- Один линейный градиент (под углом внизу слева) для создания углового эффекта разреза. Этот градиент имеет фиксированный размер 25px x 25px.
- Один линейный градиент для обеспечения сплошного цвета слева от треугольника, который вызывает эффект разреза. Градиент используется, даже если он создает сплошной цвет, потому что мы можем контролировать размер, положение фона только при использовании изображений или градиентов. Этот градиент позиционируется на -25px по оси X (в основном это означает, что он заканчивается до места, где разрез присутствует).
- Другой градиент, аналогичный описанному выше, который снова производит сплошной цвет, но расположен на
Полученный результат реагирует, производит прозрачный разрез и не требует никаких дополнительных элементов (реальных или псевдо) , Недостаток заключается в том, что этот подход будет работать только тогда, когда фон (заливка) является сплошным цветом, и очень трудно создавать границы (но все же возможно, как видно из фрагмента).
.cut-corner {
height: 100px;
width: 200px;
background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 25px 25px, 100% 100%, 100% 100%;
background-position: 100% 0%, -25px 0%, 100% 25px;
background-repeat: no-repeat;
}
.filled {
background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
/* Just for demo */
*{
box-sizing: border-box;
}
div {
float: left;
color: black;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}Some content
Some content1 ответ
Да, может, но до кучи памяти.
var a = {};
var i = 0;
while(true){
a[i] = null;
i++;
}
ФАТАЛЬНАЯ ОШИБКА: CALL_AND_RETRY_LAST Распределение не удалось - куча JavaScript не хватает памяти
Так что это зависит от размера вашей памяти.