1

Помогите пожалуйста, как сделать такую рамку с помощью :before, :after?

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

1
  • а что именно у Вас не получается? Commented 29 нояб. 2019 в 11:54

2 ответа 2

4

div{
  width:200px;
  height:80px;
  background-color: green;
  border-left:5px solid red;
  border-right:5px solid red;
  position:relative
}
.test::before{
  position:absolute;
  display:block;
  width:50%;
  height:5px;
  top:0;
  left:0;
  content:'';
  background-color: red;
}

.test::after{
  display:block;
  position:absolute;
  width:50%;
  height:5px;
  bottom:0;
  right:0;
  content:'';
  background-color: red;
}
<div class = test></div>

2

Можно без использования :before, :after через linear-gradient:

.module {
  width: 250px;
  height: 50px;
  background: linear-gradient(to right, #86CB92 0, #86CB92 50%, transparent 50%, transparent 100%), linear-gradient(to right, transparent 0, transparent 50%, #86CB92 50%, #86CB92 100%), linear-gradient(to bottom, #86CB92 0, #86CB92 100%), linear-gradient(to bottom, #86CB92 0, #86CB92 100%);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
}
<div class="module"></div>

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