Alexander Belov

img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

"This ~FF0000~string ~FFFF00~should ~00FF00~ be colored".replace(/~([A-F0-9]{3,6})~([^~]+)/g, '<span style="color: #$1;">$2</span>');

releases: Observable<any[]>;

constructor(private releasesService: ReleasesService) {}

ngOnInit() {
  this.releases = this.releasesService.getReleases();
}

releases: any[];

constructor(private releasesService: ReleasesService) {}

ngOnInit() {
  this.releasesService.getReleases()
     .subscribe(data => this.releases = data);
}

.div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
  border-bottom: 0;
  position: relative;
}
.div:after, .div:before {
  position: absolute;
  content: '';
  width: 57px;
  border-top: 3px solid red;
  bottom: -11px;
}
.div:before {
  left: -4px;
  transform: rotate(20deg);
}
.div:after {
  right: -4px;
  transform: rotate(-20deg);
}