CODEWITHSUNDEEP
htmlcsssvg
Samuel
Samuel

Reputation: 6136

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

Upvotes: 0

Views: 1209

Answers (1)

mmmoustache
mmmoustache

Reputation: 2323

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

Upvotes: 1

Related Questions