[Помогите] Отсечь лишние края

Всем привет. В процессе изучения CSS хочу узнать как мне отсечь края у блока?
У меня есть блок div в котором торчит картинка. и на него посредством псевдоэлементов before/after наложены два фона с прозрачностью. Как удалить лишние края?

Код:

.element-four {
    width: 300px;
    margin: 20px auto 300px;
    position: relative;
}

.element-four img {
     display: block;
     width: 100%;
}

.element-four::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 15px;
    top: 15px;
}

.element-four::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 200, 0, 0.5);
    position: absolute;
    top: 30px;
    left:30px;
}