cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione incidunt quae sunt, minima suscipit aliquam inventore tenetur. Omnis ab soluta, temporibus, doloremque, explicabo nam incidunt unde quasi nihil hic nisi veniam cum velit. Rerum repellendus laboriosam distinctio corporis nihil, incidunt praesentium, harum tenetur quae recusandae suscipit. Doloremque ab officiis vitae quis. Dolores illum velit odio molestias ea voluptas! Fugiat reprehenderit nam corporis doloremque consequuntur, consectetur exercitationem. Aliquid expedita, dolor vel eum assumenda, neque voluptas? Et asperiores, officia nesciunt vel optio autem ut repudiandae eos quis molestiae voluptas nisi non natus eum officiis quae nemo ea fugiat repellat laborum voluptate ad quibusdam rerum id. Quas in, quo perspiciatis voluptatem architecto, veritatis officia amet porro alias, voluptatibus, numquam quam tenetur dignissimos fugit consectetur corporis reprehenderit voluptatum provident ex eos repudiandae rerum! Incidunt magnam placeat corporis illo necessitatibus aliquid est totam commodi ab, voluptate aspernatur rerum aut recusandae optio explicabo nihil ipsum quos hic expedita, accusantium. Inventore distinctio praesentium ullam numquam tempore laudantium quia, earum reiciendis, aliquid esse optio expedita, doloremque quod adipisci, blanditiis. Quos voluptatibus facilis architecto, numquam eligendi nemo, optio commodi aut aliquid pariatur suscipit libero quam consectetur accusamus! Architecto accusantium veritatis eos esse expedita qui ipsum sed sit! Sunt expedita magni quisquam nihil, odit quia voluptates? Odit quo nam quaerat veniam, eos cupiditate commodi, sunt iusto tenetur veritatis magni. Ea ipsam ad nemo molestias cum sequi animi odit praesentium similique et, quo nisi pariatur dolorum eveniet officia eaque illum. Et ipsum vitae reiciendis, aliquam iure blanditiis officia, facilis numquam. Molestiae quae officia eligendi ducimus non, quam sequi distinctio modi perferendis dolore qui ad assumenda, sed placeat. Tenetur debitis aliquam ut sed iste assumenda qui vitae excepturi veniam ipsum! Placeat ipsa sed, reiciendis quaerat quae eveniet dolor minima vitae et id obcaecati molestiae asperiores, consequuntur optio commodi magni facere cumque quibusdam natus atque perspiciatis itaque mollitia rem! Consequatur totam voluptatem velit, eligendi quae dolorum nam autem, alias quis expedita assumenda eos dolores reiciendis optio rem explicabo adipisci tempora iure molestiae ab dolore. Hic nostrum reprehenderit, mollitia, facere quaerat ipsam vel animi eligendi quas ea optio, magni repellat aliquid culpa similique. Nisi nulla sunt iure, autem incidunt dolore quas accusantium earum quos, ullam. Accusantium iusto commodi cum sit delectus voluptas consectetur consequatur nemo vero qui, at quo deserunt in culpa. Quis veniam quas quaerat dolores maxime! At voluptatum aperiam repellendus facilis quasi deleniti accusamus eum doloribus vitae quod consectetur maxime culpa id debitis hic excepturi eveniet ad voluptates architecto, expedita, porro sequi maiores obcaecati? Culpa nobis voluptatibus, temporibus minus enim ab corporis, dolor consectetur placeat nesciunt distinctio repellat esse cum nihil, veniam magnam iusto sunt! Quasi sed inventore dignissimos deleniti numquam culpa rem officia consectetur, quos sapiente. Placeat quidem aliquam voluptate maxime non illo ullam nobis hic autem labore saepe ipsum vitae, nemo facere, minus nihil similique repellat rem architecto qui officiis assumenda provident necessitatibus dolores recusandae. Laudantium accusamus accusantium unde inventore, beatae in ad similique, illo et vero ducimus? Veniam iusto repellendus, iure explicabo reprehenderit hic commodi quidem dolorem repudiandae magnam.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est mollitia eum fugiat voluptatum nesciunt, adipisci eius officia velit. Explicabo aliquid odio fuga mollitia, vitae recusandae temporibus quaerat dolor ullam voluptatem natus, eius corporis velit, voluptatum in ut tempore, nihil dolore nostrum. Atque, accusantium, explicabo! Ad autem deleniti animi repudiandae molestias veniam vel vero recusandae dolore aperiam provident velit explicabo beatae, nisi architecto sit error doloribus fugit voluptatibus fuga! Quo iste, hic porro cumque atque temporibus non odio ut aspernatur nostrum facere ipsum assumenda reprehenderit impedit voluptatibus dolorem nemo dicta in eum. Itaque, dolorum, doloribus. Ducimus culpa dolorum eos ullam dolores nesciunt illo maiores ratione consequatur necessitatibus in doloribus molestiae, deserunt amet officiis quod, tenetur voluptas dolor reprehenderit aut itaque! Delectus eaque, doloremque dicta rem? Iure mollitia, modi ipsam accusantium! Earum officiis ipsum repellendus delectus, corrupti beatae hic ex nulla sunt atque dignissimos quidem illo excepturi, eum reprehenderit maxime laudantium est, quisquam, quaerat tempore incidunt qui odio illum consectetur. Labore facere et dolorem quod perspiciatis iure voluptatem explicabo nemo ipsa repellat, iste eligendi harum blanditiis, provident cupiditate? Qui itaque magni minima beatae atque et dolores doloremque, obcaecati tempore vero neque commodi animi, saepe consectetur accusamus ab facere voluptatem ipsam quos dicta, error at id ipsum. Cumque dolore, vero culpa enim. Reprehenderit obcaecati nam ea officia distinctio? Praesentium dolorem obcaecati ab ratione ex nihil, fugiat quis ipsum dolor, similique velit fuga soluta sed unde tempora illum animi nobis placeat, necessitatibus aliquam, maxime a quisquam ipsam. Consequatur sunt, dolore, dolor officia quisquam necessitatibus totam aliquam distinctio aut sapiente rem eveniet provident quam, culpa aperiam reiciendis accusamus asperiores ex unde eligendi. Sapiente ipsa natus error, impedit illum magni quidem enim voluptatum eligendi reprehenderit quod nulla odit veniam dolores non rem recusandae quia et ut sint unde dignissimos, cumque, laudantium in. Distinctio autem, eveniet, similique vitae voluptatem voluptas assumenda quas blanditiis quae iusto dolore qui, nam architecto, voluptate. Repudiandae necessitatibus suscipit repellat, eligendi blanditiis quae illo quod nostrum! Porro dolorum perferendis neque magnam! Modi eum facilis, ut repellat consectetur quaerat soluta. Ex, distinctio. Consectetur, dolorem quisquam beatae aut quas consequatur ab quae, aperiam totam, accusantium natus eaque voluptate nostrum, voluptates rerum incidunt? A labore rerum laudantium ratione iure id molestiae perferendis molestias harum cupiditate, dolor enim quis, eos, libero unde in! Eius deleniti, aliquam itaque alias odio, debitis. Sint autem tempora deleniti eos obcaecati ea qui voluptas officia laudantium explicabo et ullam fuga omnis blanditiis iure repellendus veritatis, delectus ex aut. Porro aliquam laudantium obcaecati praesentium, eaque magnam non expedita debitis enim. Explicabo illo ea, a porro inventore dolore cumque, quaerat est reprehenderit error. Possimus tempore fugiat suscipit! Porro ea at nihil dolorem eius rem quo facere libero a delectus maxime, neque fuga, deserunt quas odio, molestiae aliquid itaque doloribus eligendi cupiditate culpa omnis! Ducimus, a dolorem modi, eveniet veritatis enim consectetur animi vel impedit. Voluptatibus laborum soluta excepturi et veritatis officiis earum consectetur. Voluptate magnam facilis laudantium ipsam, a explicabo ducimus temporibus, pariatur dolorum. Veniam doloribus quisquam est minus, deserunt aspernatur numquam consequatur maxime.</div>
            
          
!
            
              .container
	text-align: center
	width: 600px
	margin: auto
	position: relative
	padding: 20px 0 100px

	&:nth-child(2)
		background-color: lightblue
	
	&:nth-child(1)
		background-color: lightgreen
		
		
		&:after
			position: absolute
			z-index: 1
			width: 0
			height: 0
			content: ""
			bottom: 0
			left: 0
			border-top: 100px solid transparent
			border-bottom: 100px solid lightblue
			border-left: 600px solid transparent			



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

Console