samsos samsos - 3 months ago 7
CSS Question

Adding svg pattern to border-image property

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 type of effect 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

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;  
}