Добавить элемент внутри элемента
Я новичок в веб-разработке и пытаюсь понять, как добавить элемент внутри element.
.blackBox {
background: #000;
z-index: 0;
}
.text {
color: #000;
z-index: 2;
}
.redBox {
background: red;
opacity: 0.5;
z-index: 1;
}<div class = "blackBox">
<div class = "text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
<div class = "redBox" />
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Сначала вам нужно установить контейнер должность в относительное и абсолютное положение элементов text и redBox. Затем присвойте каждому из них соответствующее значение top, чтобы текст перекрывал красную рамку.
Затем вы можете использовать преобразование skewY для достижения эффекта перекоса.
Я также использовал border-radius, чтобы получить закругленную границу на изображении.
например
.blackBox {
background: black;
z-index: 0;
height: 200px;
width: 300px;
position:relative;
border-radius: 10px;
}
.text {
position:absolute;
color: white;
z-index: 2;
padding: 10px;
}
.redBox {
position:absolute;
background: red;
opacity: 0.5;
z-index: 1;
height: 110px;
width: 300px;
top: 45px;
transform: skewY(-5deg);
}<div class = "blackBox">
<div class = "text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
<div class = "redBox" />
</div>Для этого вам понадобится несколько вещей. Во-первых, вы захотите дать своему .redBoxposition из absolute, а также дать родительскому .blackBoxposition из relative. После этого дайте вашему красному квадрату top или 0, чтобы элементы перекрывались.
Вам также необходимо указать красной коробке width и height. Я выбрал 100% для height и 150% для width. Это сделано для того, чтобы красный прямоугольник был больше контейнера, чтобы он доходил до краев. Для компенсации этого используется отрицательный margin-left.
Отсюда просто нужно дать красному прямоугольнику отрицательное вращение с помощью transform: rotate(-5deg). Наконец, вы захотите дать своему .blackBoxoverflow: hidden, чтобы скрыть те части, где красный прямоугольник выходит за пределы своего контейнера.
Это можно увидеть в следующем:
.blackBox {
background: #000;
z-index: 0;
position: absolute;
height: 50px;
width: 300px;
padding: 20px;
overflow: hidden;
border-radius: 10px;
}
.text {
color: #fff;
z-index: 2;
}
.redBox {
background: red;
opacity: 0.5;
z-index: 1;
position: absolute;
top: 0;
margin-left: -25%;
width: 150%;
height: 100%;
transform: rotate(-5deg);
}<div class = "blackBox">
<div class = "text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
<div class = "redBox" />
</div>Отличная детализация css, но отсутствует border-radius на .blackBox
Я добавил это сейчас :)
Намного лучше :) +1 за это!
спасибо, это было полезно. Также для .text потребуется позиция. Я добавил это в :)
Что-то вроде этого?
.blackBox {
background: #000;
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.text {
color: #FFF;
z-index: 2;
position: absolute;
top: 5%;
margin: 10px;
}
.redBox {
background: darkred;
position: absolute;
height: 140px;
width: 400px;
overflow: hidden;
transform: rotate(-10deg);
left: -40px;
top: 20px;
}<div class = "blackBox">
<div class = "text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
<div class = "redBox">
</div>
</div>Изменив Ответ обсдидиановых веков, вы можете сделать это без дополнительного бессмысленного элемента "redbox". Вместо этого используйте псевдоэлемент, например :before. Я бы также сказал, что вам лучше дать blackbox относительное положение, тогда внутренние элементы позиционируются относительно него.
Чтобы текст отображался как белый, задайте элемент .textposition:absolute и z-index выше, чем псевдоэлемент :before.
.blackBox {
background: #000;
z-index: 0;
position: relative;
height: 50px;
width: 300px;
padding: 20px;
overflow: hidden;
border-radius:30px;
}
.text {
color: #fff;
z-index: 10;
position:absolute;
}
.blackBox:before {
background: red;
opacity: 0.5;
z-index: 1;
position: absolute;
top: 0;
margin-left: -25%;
width: 150%;
height: 100%;
transform: rotate(-5deg);
content:'';
}<div class = "blackBox">
<div class = "text">Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </div>
</div>А как насчет один элемент и некоторого градиента в качестве фона:
.blackBox {
padding:50px;
width:300px;
border-radius:10px;
border-top:10px solid #000;
border-bottom:10px solid #000;
background:
linear-gradient(to top left,transparent 50%,#000 51%) 0 0/100% 40px no-repeat,
linear-gradient(to bottom right,transparent 50%,#000 51%) 0 100%/100% 40px no-repeat,
red;
}<div class = "blackBox">
Lorem Ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</div>
Небольшое примечание
<div />недействителен html: stackoverflow.com/questions/3558119/…