Как прикрепить изображение к границе после линии границы (не внутри границы)

Question

Вот ссылка, чтобы понять, что я пытаюсь сделать.

https://stackblitz.com/edit/angular-resizable?file=app%2Fapp.component.css

здесь .. вместо темно-серого я хочу добавить изображение в этом месте.

Я пробовал что-то подобное, но это не работает

this.el.nativeElement.style ["border-right"] = this.resizableGrabWidth + "url ('image.svg' ) ";

Answer 1

Изображение границы не может быть указано на "border-right", а только для всех границ сразу с использованием стиля border-image. Попробуйте следующее:

this.el.nativeElement.style["border-right"] = this.resizableGrabWidth + "px solid transparent"; 
this.el.nativeElement.style["border-image"] = "url(assets/border.png) 30 round";

Изображение границы будет отображаться справа, только если это единственная граница с ненулевой шириной. (См. Также: пример w3schools )