cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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="basic-triangle"></div>
<div class="basic-triangle2"></div>
<div class="basic-triangle3"></div>
<div class="yellow-back">dolor sit amet, consectetur adipisicing elit. Quis, sint omnis, ab rerum tempora ipsum repellendus ratione officiis illum at ipsam debitis enim fuga ipsa, eveniet! Voluptates culpa laboriosam earum est? Ullam, tempore sit ut. Laboriosam impedit officiis quidem, voluptatibus rerum optio suscipit aperiam fuga natus, quis a deserunt, nulla? Consectetur fuga aperiam ducimus ex labore itaque fugiat ipsum delectus expedita sequi quam repudiandae, maxime sunt vero quaerat cumque autem minima amet, et laboriosam culpa iste necessitatibus dolor alias commodi! Impedit voluptas qui iste aspernatur exercitationem asperiores nam accusamus nulla sed suscipit deserunt, quam doloribus ipsum tenetur a ab assumenda! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eligendi facilis culpa distinctio dignissimos velit voluptatibus, eos nihil dolorum voluptatem, doloremque ullam numquam. Similique deserunt, quis repellat iste. Soluta enim fuga necessitatibus, quas quo cupiditate vel odio, sed dolore pariatur qui exercitationem numquam asperiores similique! Modi fugit nam voluptate eius beatae ut vitae alias labore est, perspiciatis laudantium numquam laboriosam mollitia rem? Sed nemo molestias facere, quisquam vel, veritatis assumenda autem officiis, nulla quas quo earum? Fugiat sapiente eos est, at alias error non ducimus numquam itaque inventore aut odio totam nobis a aliquam dolorum. Est quos voluptate eius asperiores facilis non exercitationem sit ad accusantium, repudiandae possimus iste inventore perspiciatis architecto reprehenderit, quia at doloremque magnam vero id. Quas tenetur blanditiis aliquam ipsa excepturi illum nisi dolor hic rerum repellat. Voluptatibus sapiente minus facilis minima dolore. Eum, deleniti? In nihil harum facilis dolorem quasi aut temporibus unde quod fugiat soluta hic, adipisci officia non nobis, dicta dolorum excepturi voluptatum cum nisi sunt animi aperiam ex beatae. A tempora voluptates consequatur, recusandae sapiente ipsam ipsa impedit voluptatum et quo, obcaecati explicabo alias eveniet quis ratione dignissimos placeat laudantium, rerum distinctio. Incidunt praesentium quibusdam, exercitationem beatae reiciendis veniam voluptates quo. Quo quia exercitationem esse consequuntur natus error mollitia architecto omnis autem aliquam tempora quos ipsam minus itaque commodi, quasi quam voluptas optio, repellat facilis dolore perferendis. Quis accusantium hic, veniam autem laboriosam quas! Hic, iusto! Asperiores, dicta esse ut corporis harum consectetur dolores minima quaerat eos, eligendi hic fuga nobis culpa eaque modi fugiat assumenda quam! Sunt molestias, quibusdam illo ex harum incidunt, ab dolorum ea libero nesciunt, consectetur, voluptates illum labore eaque quaerat cupiditate quam accusamus. Provident nemo dolorum sed natus quasi, ex asperiores! Eaque ad vel alias atque in expedita maxime rerum dolor delectus. Iure odit, nulla adipisci ab, ducimus consequuntur, quos, aperiam vero dolores fuga rerum architecto! Culpa facilis accusantium laudantium autem nemo accusamus qui enim quia minus cum facere fugit aliquid suscipit sit ullam sapiente numquam ipsa asperiores illo harum, hic, totam deserunt nostrum non! In ex perferendis sapiente earum praesentium ab ut, iste, voluptates reiciendis hic quia labore maxime dolores voluptatum fugit eius modi, quo recusandae et quas laboriosam! Eaque culpa perspiciatis asperiores, iure nemo ab, sequi nihil magnam explicabo vitae quae fuga pariatur animi architecto. Tenetur perferendis dicta placeat, ea, laborum perspiciatis! Eaque sequi ipsam similique hic minima autem amet accusantium quasi sint quod, eos commodi nobis ipsum, nihil accusamus tempore error adipisci, consectetur, beatae mollitia harum sunt. Ducimus, rem, explicabo! Deleniti aliquid iure officia itaque veritatis! Dolorem voluptates soluta, aliquid earum eos quo, quidem, vero architecto distinctio enim voluptatum aspernatur quibusdam commodi sapiente. Aperiam asperiores magni esse voluptatum provident minima error incidunt voluptatibus ducimus sapiente eius libero at doloribus, corporis, ipsam possimus laudantium nihil sequi non labore eum consectetur. Fuga aliquam cumque corporis quo placeat omnis, quis nulla impedit excepturi doloribus voluptatem molestiae ducimus consectetur, maxime natus! Quas libero autem quidem reprehenderit voluptatum facere rem est assumenda, aut corporis? Distinctio nemo recusandae pariatur sint!</div>
            
          
!
            
              .basic-triangle
	color: white
	width: 0px
	height: 0px
	border-top: 60px solid red
	border-bottom: 60px solid blue
	border-right: 100vw solid yellow

.basic-triangle2
	color: white
	width: 0px
	height: 0px
	border-top: 60px solid red
	border-bottom: 60px solid blue
	border-left: 60px solid green
	border-right: 100vw solid yellow

//ただの背景の斜めならこれがベスト。ボーダーが重なる領域が少ないため
.basic-triangle3
	color: white
	width: 0px
	height: 0px
	border-top: 60px solid red
	border-right: 100vw solid yellow

.yellow-back
	margin: 100px 0 100px
	background-color: yellow
	position: relative

	&:before
		position: absolute
		width: 0
		height: 0
		content: ""
		top: -60px * 2
		border-top: 60px solid transparent
		border-bottom: 60px solid black
		border-left: 100vw solid transparent
	

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console