1

Подскажите, как реализовать блок с такой рамкой

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

2 ответа 2

1

body,
html {
  width: 100%;
  height: 100%;
  background: #404040;
}

.box {
  width: 200px;
  height: 100px;
  background: #f90;
  border: 2px solid;
  border-image: linear-gradient(to left, white 50%, black 0%);
  border-image-slice: 1;
}
<div class="box"></div>

1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #D5D8DA;
  padding: 15px;
}

.box {
  background: linear-gradient(to right, rgba(8, 110, 219, 1) 0%, rgba(8, 110, 219, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
  padding: 3px;
}

.box-inner {
  padding: 25px;
  background: #D5D8DA;
}

.box:hover {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(8, 110, 219, 1) 50%, rgba(8, 110, 219, 1) 100%);
}
<div class="box">
  <div class="box-inner">
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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