CodePen

HTML

            
              <div class="svg-bi svg-ds">
  <h1>SVG Border Image</h1>
  <h2>(SVG Drop Shadow)</h2>
</div>
<div class="pseudo gradient">
  <div>
    <h1>Pseudo Element
        Linear Gradients</h1>
    <h2>(CSS Drop Shadow)</h2>
  </div>
</div>
<div class="svg-bi css-ds">
  <h1>SVG Border Image</h1>
  <h2>(CSS Drop Shadow)</h2>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* SVG Data URI & Border Image (with SVG Drop Shadow) */
@mixin pinked-border(
  $size            : 2,
  $color           : black,
  $dropshadow-x    : 0,
  $dropshadow-y    : 0,
  $dropshadow-blur : 0
){
  $svg-box-width:  $size * 4;
  $svg-box-height: $svg-box-width;
  $svg-obj-width:  $size * 4;
  $svg-obj-height: $svg-obj-width;

  $svg-dropshadow: '';

  $svg-filter: '';
  @if $dropshadow-x != 0 or $dropshadow-y != 0 or $dropshadow-blur != 0 {
    $svg-dropshadow-width:  ($dropshadow-x + $dropshadow-blur)*2;
    $svg-dropshadow-height: ($dropshadow-y + $dropshadow-blur)*2;
    $svg-box-width:  $svg-box-width + $svg-dropshadow-width;
    $svg-box-height: $svg-box-height + $svg-dropshadow-height;
    $svg-dropshadow: '<filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="#{$dropshadow-blur}"/><feOffset dx="#{$dropshadow-x}" dy="#{$dropshadow-y}" result="offsetblur"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
    $svg-filter: 'filter="url(#dropshadow)"';
  }

  $svg-box-midpoint-x: $svg-box-width/2;
  $svg-box-midpoint-y: $svg-box-height/2;

  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="#{$svg-box-width}" height="#{$svg-box-height}" viewBox="0,0 #{$svg-box-width},#{$svg-box-height}">#{$svg-dropshadow}<polygon fill="#{$color}" #{$svg-filter} points="#{$svg-box-midpoint-x},#{$svg-box-midpoint-y - ($svg-obj-height/2)} #{$svg-box-midpoint-x - ($svg-obj-width/2)},#{$svg-box-midpoint-y} #{$svg-box-midpoint-x},#{$svg-box-midpoint-y + ($svg-obj-height/2)} #{$svg-box-midpoint-x + ($svg-obj-width/2)},#{$svg-box-midpoint-y}"/></svg>') #{(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))/$svg-box-height*100}% #{(($svg-box-width/4)+(($dropshadow-x + $dropshadow-blur)/2))/$svg-box-width*100}% repeat;
  border-width: 0 0 #{round(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))}px;
  border-style: solid;
  background-clip: padding-box;
  margin-bottom: -#{round(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))}px;
}

@mixin lg-pinked-border(
  $size  : 2,
  $color : black
){
  box-sizing: border-box;
  background-clip: padding-box;
  border-bottom: #{$size}px solid transparent;
  &:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: #{$size}px;
    bottom: -#{$size}px;
    left: 0;
    background-image:
      linear-gradient(45deg, transparent 33.333%, $color 33.333%, $color 66.667%, transparent 66.667%),
      linear-gradient(-45deg, transparent 33.333%, $color 33.333%, $color 66.667%, transparent 66.667%);
    background-size: #{$size*2}px #{$size*4}px;
    background-position: 50% -#{$size*3}px;
    background-repeat: repeat-x;
    z-index: 1;
  }
}


/* SVG Data URI & Border Image */
.svg-ds {
  @include pinked-border(10, #542026, 0, 1, 2);
  position: relative;
  z-index: 1;
}
        
/* Liner Gradients & Pseudo Element */
.pseudo {
  position: relative;
  @include lg-pinked-border(10, #ad424e);
  z-index: 2;
  -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 0px 1px 2px);
  background-color: #ad424e;
}

/* SVG Data URI & Border Image */
.css-ds {
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 2 1"><polygon fill="#542026" points="1,1 0,0 2,0"/></svg>') 0 0 100% repeat;
  border-width: 0 0 10px;
  border-style: solid;
  background-clip: padding-box;
  margin-bottom: -10px;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 0px 1px 2px);
}


/*******************
  Unrelated Styles
********************/
body {
  background: #888;
  display: table;
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
}

body > div {
  background-color: #542026;
  text-align: center;
  box-sizing: border-box;
  color: white;
  font: bold 0.75em/1.3 sans-serif;
  text-shadow: 0 1px 0 black;
  width: 33.3333%;
  padding: 2em;
  display: table-cell;
  vertical-align: middle;
  transform: translatez(0);
}

h1, h2 {
  margin: 0;
  white-space: pre-line;
}

html { height: 100%; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Works best in Webkit */

/* Inline XML data URI fix */
/* Some browsers (most browsers) don't render inline XML data URI's unless they are escaped. */
(function() {

if(!window.StyleFix) return;
if(hasxmldatauri()) return;
  
// Test unescaped XML data uri
function hasxmldatauri() {
  var img = new Image();
  datauri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 1,1" fill="#000"></svg>';
  img.src = datauri;
  return (img.width == 1 && img.height == 1);
}

StyleFix.register(function(css) {

  return css.replace(RegExp(/url\(\'data:image\/svg\+xml,(.*)\'\)/gi), function($0, svg) {
		return "url('data:image/svg+xml," + escape(svg) + "')";
	});
  
});

})();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................