Цитата:
Сообщение от Biotoxsin
Эта небольшая задачка поможет мне понять как справиться с моей проблемой.
|
Цитата:
Сообщение от Biotoxsin
Возможно ли в пустой области 100x100px div создать без вспомогательных HTML тегов чёрный квадрат 50x50px.
|
Да! Существует множество способов это сделать... Вот некоторые примеры... Все эти стили могут быть установлены через JS, не требуются псевдо-элементы
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<style>
/* вспомогательные объявления, не относящиеся к примеру */
html {
background: linear-gradient(45deg, red, blue);
min-height: 100%;
}
div {
width: 100px;
height: 100px;
margin: 1em;
display: inline-block;
}
div:nth-child(2n) {
margin-left: calc(-1em - 100px);
border: 1px dashed rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
/* примеры квадратов 100×100 c внутренним квадратом 50×50 */
div:nth-child(1) {
box-sizing: border-box;
background: padding-box black;
border: 25px solid transparent;
}
div:nth-child(3) {
background: linear-gradient(black, black) no-repeat 25px 25px / 50px 50px;
}
div:nth-child(5) {
box-shadow: inset 0 0 0 25px white, inset 0 0 0 50px black; /* вариант на белом фоне */
}
div:nth-child(7) {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\
<path d="M25,25 h50 v50 h-50Z"></path>\
</svg>');
}
div:nth-child(9) {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\
<path d="M25,25 h50 v50 h-50Z"></path>\
</svg>');
}
div:nth-child(11) {
background: black;
transform: scale(0.5); /* если не важна рамка, тень, другое содержимое и значение getBoundingClientRect */
}
div:nth-child(13) {
background: black;
clip-path: polygon(25px 25px, 75px 25px, 75px 75px, 25px 75px); /* если не важно содержимое */
}
</style>
Вариант №1 Любой способ, который был показан выше, может быть применён через JS например так...
<body><script>
const div = document.createElement("div");
Object.assign(div.style, {
width: "100px",
height: "100px",
background: "linear-gradient(black, black) no-repeat 25px 25px / 50px 50px"
});
document.body.append(div);
</script>
Вариант №2 Также возможно сгенерировать картинку при помощи Canvas API.
<body><script>
const div = document.createElement("div");
const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
const context = canvas.getContext("2d");
context.fillRect(25, 25, 50, 50);
Object.assign(div.style, {
width: `${canvas.width}px`,
height: `${canvas.height}px`,
background: `url("${canvas.toDataURL()}") center / contain`
});
document.body.append(div);
</script>
ЕЩЁ Вариант №3 Также возможно сгенерировать картинку при помощи
CSS Paint API.
<body><script>
function paintBox() {
class Box {
paint(context, size) {
context.fillRect(0.5 * (size.width - 50), 0.5 * (size.height - 50), 50, 50);
}
}
registerPaint("box", Box);
}
CSS.paintWorklet.addModule(
`data:text/javascript,${`(${paintBox})();`}`
);
const div = document.createElement("div");
Object.assign(div.style, {
width: "100px",
height: "100px",
background: "paint(box)"
});
document.body.append(div);
</script>