Помогите пожалуйста, как сделать такую рамку с помощью :before, :after?
2 ответа
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>
Можно без использования :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>