Я знаю, что это закрыто , но, возможно, это будет полезно для кого-то еще.
Вы можете установить изображение с рамкой в качестве фона.
Или создать собственную рамку!
.border {
border: 1px solid black;
height: 93vh; /* set to height of page */
}
.corner {
background-image: url('https://i.pinimg.com/originals/10/9c/57/109c57355958d296033ee8577491c006.jpg');
background-repeat: none;
background-size: contain;
height: 100px;
width: 100px;
border: none;
position: absolute;
}
.corner.bottom-right {
transform: scaleX(-1);
bottom: 0;
right: 0;
}
.corner.bottom-left {
bottom: 0;
left: 0;
}
.corner.top-right {
transform: scale(-1, -1);
top: 0;
right: 0;
}
.corner.top-left {
transform: scale(1, -1);
top: 0;
left: 0;
}
<div class="page">
<div class="border">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"> </div>
<div class="corner bottom-right"></div>>
</div>
</div>
См. Скрипту: JSFiddle
Что делает это решение:
- Наборыграницу вокруг всей страницы с помощью
.border, вы можете изменить цвет, ширину и т. д. здесь - Устанавливает изображение угла в
.corner в background-image, это должен быть только один угол границы, которыймы повернемся, чтобы соответствовать, это будет выглядеть примерно так: Пример изображения угла - Устанавливает положение углового изображения на
absolute, поэтому оно будет отображаться именно там, где мы говоримв этом случае в каждом из углов размер изображения угла также задается в .corner - Каждое из изображений имеет уникальный тег положения как часть тега
class, этоформа bottom-right и диктовать, где они будут находиться на странице - Диктовка позиции с помощью класса
bottom-right выполняется с использованием этих соответствующих тегов bottom: 0; right: 0;, которые соответствуют тому, где мы хотим, чтобы это былона странице - Указывая направление, в котором мы хотим получить изображениеg происходит с этим тегом
transform: scaleX(-1), подробнее о преобразовании читайте здесь: Transform
Надеюсь, это кому-нибудь пригодится! :)