CodePen

HTML

            
              <div class="box small"></div>
<div class="box medium"></div>
<div class="box">
  <p>an arbitrary amount of content moo</p>
  
</div>
<br/><br/><br/><br/>
<div class="box">
  no p tag works?
  
</div>
<div class="box">
  <div>
    moo
  </div>
  <img class="moo" src="http://www.ozmorris.com/images/arrow.svg" width="45" alt=""/>
</div>

<div class="box large"><img class="moo" src="http://www.ozmorris.com/images/arrow.svg" width="60" alt=""/>Bacon ipsum dolor sit amet tenderloin chuck turducken venison pork belly, pancetta swine ham hock hamburger cow andouille doner. Tail frankfurter ham brisket, corned beef turducken short loin filet mignon meatloaf sausage chuck ribeye tenderloin. Jowl ground round capicola meatball tail ball tip meatloaf andouille short ribs strip steak pig pork chop turkey shankle jerky. Flank meatball corned beef fatback hamburger. Turducken venison chicken, ribeye brisket tongue bacon tail filet mignon spare ribs. Capicola short ribs doner flank short loin. Andouille tri-tip ribeye, boudin tongue fatback tail t-bone capicola pork belly rump. Bacon shankle shank swine ground round sausage short loin biltong bresaola cow. Ground round jowl jerky, chicken shoulder short ribs pastrami. Biltong ham hock t-bone chicken drumstick. Pancetta prosciutto pork chop brisket ham hock pork. Filet mignon frankfurter turducken sausage bacon shank beef venison. Jerky pork beef ribs filet mignon pastrami cow. Andouille drumstick pork belly beef ribs chuck sirloin pancetta jerky tail. Pork belly beef ribs hamburger sirloin prosciutto pork kielbasa. Rump beef ribs short ribs turkey brisket, leberkas pig turducken venison ham meatloaf sirloin filet mignon fatback. Capicola sausage spare ribs pork loin t-bone boudin fatback tongue bresaola. Shank beef ribs frankfurter corned beef pancetta kielbasa tenderloin brisket leberkas pork capicola turducken. Doner boudin cow, ribeye bacon beef ground round beef ribs tenderloin sirloin tail pork chop. Doner meatball biltong chuck boudin tail beef pork belly pork turkey shank short ribs jerky. Pork chop pork loin pork doner pork belly short ribs jerky. Salami hamburger pork belly shankle, beef ribs jerky boudin fatback andouille tongue filet mignon frankfurter ball tip. Short ribs jowl pork belly filet mignon meatball, meatloaf tongue shankle beef cow t-bone boudin ball tip rump. Tongue filet mignon ham hock bresaola salami ball tip sirloin short loin beef ribs. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</div>
            
          
!
via HTML Inspector

CSS

            
              .box {
  width:250px;
  min-height:25px;
  height: 50%;
  background:lightblue;
  margin:15px auto;
  position:relative
}

.small {
  height:50px;
}

.medium {
  height:75px;
}
  

.box {
  width:250px;
  min-height:25px;
  background:lightblue;
  position:relative;
  margin:15px auto;
  border-right: 4px solid #ff0000;
}

.box:before {
  content:"";
  position:absolute;
  right:-25px;
  width:25px;
  height:100%;
  background: url(http://www.ozmorris.com/images/triangle-right.png);
  background-position:right;
  background-repeat:no-repeat;
  background-size: 50px 100%;
}
/*
ADD SVG WRAPPER AROUND DIVS TO SIMULATE SVG AND UNCOMMENT
.svg {
  	.box:before {
			content:"";
			position:absolute;
			right:-30px;
			width:45px;
			height:100%;
			background-image: url(/media/arrow.svg);
			z-index: -1;
		}
}*/
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................