将svg模式添加到border-image属性

Question

I'm attempting to add an SVG pattern to the bottom border of my DIV element. The approach i've taken is not working. Here is the code so far. . This is where I created the SVG pattern . Lastly this is i'm trying to create in CSS.

HTML

<div class="pattern">
   hello
</div>

CSS

.pattern{
  color:white;
  width: 500px;
  height: 500px;
  border-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
  )repeat;
}

Answer 1

You could perhaps use the :after pseudo element to create the same effect:

.pattern{
  color:white;
  width: 500px;
  height: 500px;
  position: relative;
  top: 0;
  left: 0;
}

.pattern:after{
  content: "";
  display: block;
  height: 8px;
  width: 100%;
  background-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
  );
  position: absolute;
  bottom: 0;
  left: 0;  
}