startv

JHrIy

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

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>
            
          
!

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;
		}
}*/
            
          
!

JS

            
              
            
          
!
999px
Loading ..................

Console