2

Подскажите, пожалуйста, как правильно реализовать подобную рамку? Интересует именно форма углов, это можно сделать сделать на чистом CSS?

введите сюда описание изображения

1

2 ответа 2

2

Что бы это отображалось правильно, необходимы одинаковые размеры блока и изображения.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  height: 400px;
  width: 300px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

div::before,
div::after {
  content: '';
  position: absolute;
  background-image: url(https://picsum.photos/300/400);
  background-position: center center;
}

div::before {
  height: 100%;
  width: 100%;
  clip-path: polygon(0 15%, 20% 15%, 20% 0, 80% 0, 80% 15%, 100% 15%, 100% 85%, 80% 85%, 80% 100%, 20% 100%, 20% 85%, 0 85%);
}

div::after {
  width: 90%;
  height: 90%;
  border-radius: 10% / 13%;
}
<div>
</div>

2
  • с фотографией не канает...
    – Rikky
    11 янв 2020 в 13:28
  • @hu-fo-of-ex, большое спасибо за пример, буду разбираться)
    – Octavian
    11 янв 2020 в 14:25
2

Либо в Photoshop делаем маску (обводим границы и заливаем нужным фоном, а внутри - полностью прозрачно чтобы было), далее ставим div с background-этой маской поверх div с изображением, либо вот такой костыль на чистом html+css, но будут присутствовать швы.

.container {
  position: relative;
  width: 270px;
  height: 300px;
  overflow: hidden;
}

.container div {
  background: url('https://cdn.steemitimages.com/DQmPgK575YnZP6uWG3iDMqPicEqrrwgVgSGTPmo1SqSpxS8/3402463-KNVHBTVS-7.jpg');
  background-size: cover;
}

.one,
.two,
.three {
  background: gray;
  border: 0px solid orange;
}

.one {
  width: 150px;
  height: 100%;
  margin-left: 60px;
  float: left;
  z-index: 1;
}

.two {
  width: 221px;
  height: 80%;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: -190px;
  float: left;
  z-index: 2;
}

.three {
  position: absolute;
  width: 193px;
  height: 93%;
  margin-top: 9px;
  margin-bottom: 9px;
  margin-left: 35px;
  border-radius: 18px;
  z-index: 5;
}
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

1
  • on two - имеют z-index , это же не работает ....мммм ? 11 янв 2020 в 13:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.