Ребята как сделать так чтобы border-image был наоборот повернут вниз через CSS пытаюсь уже какой раз, не получается.
Должен быть как в картинке в приложении ниже.
.wave{
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}
Ответ
Как то так
.wave{
height: 50px;
position: relative;
background-color: red;
overflow: hidden;
}
.wave::before{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(4px 5px at bottom, transparent 12px, aquamarine 13px);
}
.wave::after{
content: "";
position: absolute;
left: -10px;
top: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at top, aquamarine 14px, transparent 12px);
}
Комментариев нет:
Отправить комментарий