CSS angled stripes

Developer
Englishextra
Size
5,116 Kb
Views
10,115

How do I make an css angled stripes?

An attempt to produce an angular striped background in CSS. Not my design. Was to help answer a users question on reddit (see code). The devices are also in CSS, which I cut and paste from Willpaige's awesome work at http://codepen.io/willpaige/pen/rFElD.. What is a css angled stripes? How do you make a css angled stripes? This script and codes were developed by Englishextra on 17 January 2023, Tuesday.

CSS angled stripes Previews
IQ Test

CSS angled stripes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS angled stripes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Taking a stab at answering this question:
http://www.reddit.com/r/css/comments/1w5qdh/how_do_i_make_these_diagonal_lines_in_css_where/ -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<div class="page_bg"> <div class="top_bg"> <div class="red">&nbsp;</div> <div class="tan"> <div class="circles"> <div class="typography">Typography</div> <div class="color">Color</div> <div class="composition">Composition</div> </div> </div> <div class="black"> <!-- 100% CSS devices image by Willpaige. Original here: https://codepen.io/willpaige/pen/rFElD --> <div class="devices_container"> <div class="screen monitor"> <div class="content"> <div class="pg"> <ul class="btns"> <li></li><li></li><li></li> </ul> <ul class="txt"> <li></li> <li></li> <li class="thin"></li> <li class="thin"></li> <li class="thin"></li> </ul> </div> </div> <div class="base"> <div class="grey-shadow"></div> <div class="foot top"></div> <div class="foot bottom"></div> <div class="shadow"></div> <div class="keyboard"> <div class="btm"></div> <ul class="keys"> <li></li> <li></li> <li></li> <li></li> </ul> <div class="shadow"></div> </div> </div> </div> <div class="laptop"> <div class="content"> <ul class="txt txt-laptop"> <li></li> <li></li> <li class="thin"></li> <li class="thin"></li> <li class="thin"></li> </ul> </div> <div class="btm"></div> <div class="shadow"></div> </div> <div class="phone"> <div class="screen"> <div class="content"> <ul class="txt"> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="shadow"></div> </div> </div> </div> <!-- End of device images --> </div> <div class="bottom_bg"> <div class="red2">&nbsp;</div> <div class="tan2">&nbsp;</div> </div>
</div>
<div class="page_container"> <nav> <div class="logo"><a href="#">WUSTOMIZE</a></div> <div class="links"> <ul> <li><a href="#" class="current">WHAT WE DO<br></a></li> <li><a href="#">WHO WE ARE<br></a></li> <li><a href="#">OUR WORK<br></a></li> <li><a href="#">SAY HELLO<br></a></li> </ul> </div> </nav> <div class="design"> <h1><span class="small-header">WE<br></span>DESIGN</h1> <div class="text-content"> <p>And we're doing that with consideration of composition color and typography principles.</p> <p>Like they say, the best design is invisible, but we are taking into account the little details as well, and mixing them in.</p> <p>If you need any kind of graphics design or web design then hire us. We do logotypes, identity, and of course websites, as well as offering many other services.</p> </div> </div> <div class="code"> <h1><span class="small-header push">WE<br></span>&lt;CODE&gt;</h1> <div class="text-content"> <p>We make beautiful designs come true. In a responsive manner, and in the best possible way. We code in html5, css3, and jquery. We also develop android and iOS apps.</p> <p>Our code is clean and semantic, with a strong focus on Search Engine optimization (SEO).</p> </div> </div> <div class="code"></div>
</div>
</body>
</html>

CSS angled stripes - Script Codes CSS Codes

/* Page background styles */
.page_bg { position:absolute; top:0; left:0; width:960px; height:1500px; border:solid 1px; overflow:hidden; background-color:#ece6d8; font-family: 'Roboto', sans-serif;
}
.top_bg { width:200%; height:1000px; margin-left:-50%; margin-top:-190px; background-color:#ece6d8; transform:rotate(-35deg); -webkit-transform:rotate(-35deg); position:relative; z-index:5;
}
.red { width:200%; height:200px; background-color:#d83c26;
}
.tan { width:200%; height:400px; background-color:#ebe5d7; position:relative; z-index:7;
} .circles { width:300px; height:300px; transform:rotate(35deg); -webkit-transform:rotate(35deg); position:relative; top:220px; left:25%; z-index:7; } .composition, .typography, .color { width:150px; height:90px; border-radius:500px; color:#fff; text-align:center; padding-top:60px; font-size:0.8em; } .composition { position:absolute; top:0; left:0; background-color:#313131; opacity:0.9; } .typography { position:absolute; top:35%; left:0; background-color:#c7b585; color:#000; opacity:0.9; } .color { position:absolute; top:15%; left:35%; background-color:#d83c26; opacity:0.9; }
.black { width:200%; height:400px; background-color:#313131; position:relative; z-index:8;
}
.bottom_bg { width:200%; height:1000px; margin-left:-50%; margin-top:510px; background-color:#ece6d8; transform:rotate(35deg); -webkit-transform:rotate(35deg); position:relative; z-index:10;
}
.red2 { width:200%; height:400px; background-color:#d83c26;
}
.tan2 { width:200%; height:400px; background-color:#ebe5d7;
}
/* Content Styles | Z-index 11+ */
.page_container { position:absolute; top:0; left:0; width:960px; height:1500px; z-index:11; font-family: 'Roboto', sans-serif;
}
nav { width:882px; height:16px; background-color:#1d1d1f; padding:20px 60px 20px 20px; font-size:100%; font-weight:400;
}
.logo { float:left; color:#fff; padding-left:80px; font-size:0.9em;
}
.links { float:right; color:#fff; font-size:0.8em;
}
.links ul { list-style:none; margin:0; line-height:26px;
}
.links li { float:left; padding-right:30px; text-decoration:none; color:#fff;
}
nav a { text-decoration:none; color:#fff;
}
nav a:hover { color:#d83c26;
}
.current:after { position:absolute; content:''; width: 0px; height: 0px; border-style: solid; border-width: 10px 0 0 15px; border-color: transparent transparent transparent #ebe5d7;
}
h1 { margin-bottom:30px; font-size:4em; font-weight:500; line-height:0.5em;
}
.small-header { font-size:0.3em; margin-left:5px;
}
p { font-size:0.7em;
}
.design { width:300px; margin:135px 0 0 100px; color:#333;
}
.code { float:right; width:300px; margin:20px 150px; 0 0; color:#ddd;
}
.push { margin-left:40px;
}
/*
CSS for device images taken from codepen by Willpaige. Original here: https://codepen.io/willpaige/pen/rFElD -->*/
.devices_container { box-sizing: border-box; width: 680px; margin: 0px auto; transform:rotate(35deg) scale(0.6); -webkit-transform:rotate(35deg) scale(0.6); position:relative; top:-100px; left:-34%; z-index:8;
}
.devices_container li { list-style:none;
}
.devices_container > .screen { width: 460px; height: 280px; position: relative; background: #ff6860; border: 20px solid #474e5d; border-radius: 10px;
}
.monitor > div { position: absolute;
}
.monitor:before,
.monitor:after,
.laptop:before{ content: ""; position: absolute; left: 50%; }
.monitor:before,
.laptop:before { top: -10px; margin: -3px 0 0 -3px; width: 6px; height: 6px; border-radius: 6px; background: #a5adbd;
}
.screen:after { width: 8px; height: 8px; border-radius: 8px; bottom: -10px; margin: 0 0 -4px -4px; background: #e8ebf0;
}
.content { width: 420px; height: 240px; left: 50%; margin-left: -210px; overflow: hidden;
}
.content:before { content: ""; position: absolute; right: -90px; width: 200px; height: 300px; transform: rotate(45deg); background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); z-index: 5;
}
.pg { width: 240px; height: 180px; position: absolute; left: 50%; top: 50%; margin: -90px 0 0 -120px; background: #ffffff; border: 1px solid #f4f5f7; border-top: 20px solid #f4f5f7; border-radius: 5px; box-shadow: 0 5px 0 #e0625e;
}
.btns { position: absolute; top: -20px; left: 7px;
}
.btns:before { content: ""; position: absolute; left: 35px; top: 5px; height: 10px; width: 185px; background: #fff; border-radius: 3px;
}
.btns > li { display: inline-block; list-style: none; width: 5px; height: 5px; border-radius: 5px; background: #fc5254; margin-right: 4px;
}
.btns li:nth-child(2) { background: #fcae52;
}
.btns li:nth-child(3) { background: #66b34e;
}
.txt { margin: 10px -30px; width: 220px;
}
.txt > li { background: #f3f5f7; width: 100%; height: 15px; margin-bottom: 9px;
}
.txt > li:nth-child(2) { height: 60px;
}
.txt > .thin { height: 43px; width: 30%; margin-right: 6px; display: inline-block;
}
.txt > li:nth-child(5) { margin-right: 0;
}
.base { width: 90px; height: 50px; bottom: -70px; left: 50%; margin-left: -45px; background: #e8ebf0;
}
.base:before,
.base:after,
.grey-shadow:before,
.grey-shadow:after{ content: ""; position: absolute; top: 0;
}
.base:before { border-left: 13px solid transparent; border-right: 0px solid transparent; border-bottom: 50px solid #e8ebf0; left: -13px;
}
.base:after { border-right: 13px solid transparent; border-left: 0px solid transparent; border-bottom: 50px solid #e8ebf0; right: -13px;
}
.base > div { position: absolute;
}
.grey-shadow { width: 90px; height: 12px; background: #d8dbe1; top: 0;
}
.grey-shadow:before { border-left: 3px solid transparent; border-right: 0px solid transparent; border-bottom: 12px solid #d8dbe1; left: -3px; z-index: 2
}
.grey-shadow:after { border-right: 3px solid transparent; border-left: 0px solid transparent; border-bottom: 12px solid #d8dbe1; right: -3px; z-index: 2
}
.foot { background: #e8ebf0; z-index: 1;
}
.foot.top { width: 116px; height: 5px; bottom: -5px; left: 50%; margin-left: -58px;
}
.foot.top:before,
.foot.top:after,
.foot.bottom:before { content: ""; position: absolute; top: 0px;
}
.foot.top:before { border-left: 16px solid transparent; border-right: 0px solid transparent; border-bottom: 5px solid #e8ebf0; left: -16px;
}
.foot.top:after { border-right: 16px solid transparent; border-left: 0px solid transparent; border-bottom: 5px solid #e8ebf0; right: -16px;
}
.foot.bottom { width: 150px; height: 5px; bottom: -10px; left: 50%; margin-left: -75px; z-index: 999;
}
.laptop { width: 235px; height: 155px; background: #fc9252; border: 12px solid #e8ebf0; border-radius: 10px 10px 0 0; position: absolute; top: 200px; right: 30px;
}
.laptop:before { top: -6px;
}
.laptop > div { position: absolute;
}
.laptop > .content { width: 211px; height: 131px; left: 0; margin-left: 0;
}
.txt-laptop { width: 189px;
}
.txt-laptop > li { background: #fda566;
}
.txt-laptop > li:nth-child(2) { height: 41px;
}
.txt-laptop > .thin { height: 36px; margin-right: 5px;
}
.btm { width: 296px; height: 7px; bottom: -19px; left: 50%; margin-left: -148px; border-radius: 0 0 20px 20px; background: #f4f5f7; z-index: 1;
}
.btm:before { content: ""; position: absolute; width: 42px; height: 3px; left: 50%; top: 0; margin-left: -21px; border-radius: 0 0 5px 5px; background: #d8dbe1;
}
.keyboard { width: 216px; height: 35px; bottom: -70px; left: 50%; margin-left: -108px; background: #e8ebf0; box-shadow: 0 4px 0 #d8dbe1; z-index: 2;
}
.keyboard:before,
.keyboard:after { content: ""; position: absolute; top: 0; z-index: 2;
}
.keyboard > div { position: absolute;
}
.keyboard .btm { background: #d8dbe1; width: 244px; height: 4px; border-radius: 0; bottom: -4px; left: 50%; margin-left: -122px;
}
.keyboard:before { border-left: 14px solid transparent; border-right: 0px solid transparent; border-bottom: 35px solid #e8ebf0; left: -14px;
}
.keyboard:after { border-right: 14px solid transparent; border-left: 0px solid transparent; border-bottom: 35px solid #e8ebf0; right: -14px;
}
.keys { width: 220px; margin: 4px auto; text-align: center; position: relative; left: 50%; margin-left: -150px;
}
.keys li { position: relative; left: 50%; background: #f4f5f7; height: 4px; margin: 0 0 3px -110px; z-index: 4;
}
.keys li:nth-child(1) { width: 208px; margin-left: -104px;
}
.keys li:nth-child(2) { width: 212px; margin-left: -106px;
}
.keys li:nth-child(2) { width: 212px; margin-left: -106px;
}
.keys li:nth-child(3) { width: 216px; margin-left: -108px;
}
.keys li:nth-child(4) { width: 220px; margin-left: -110px;
}
.keys li:before,
.keys li:after { content: ""; position: absolute;
}
.keys li:before { border-left: 3px solid transparent; border-right: 0px solid transparent; border-bottom: 4px solid #f4f5f7; left: -3px;
}
.keys li:after { border-right: 3px solid transparent; border-left: 0px solid transparent; border-bottom: 4px solid #f4f5f7; right: -3px;
}
.phone { width: 60px; height: 90px; position: absolute; bottom: -90px; left: -30px; border-radius: 5px; background: #000; border: 25px solid #2f343e; border-left: 5px solid #2f343e; border-right: 5px solid #2f343e;
}
.phone:before,
.phone:after { content: ""; position: absolute; left: 50%; background: #474e5d;
}
.phone:before { background: #474e5d; width: 20px; height: 4px; margin-left: -10px; top: -12px; border-radius: 2px;
}
.phone:after { width: 10px; height: 10px; border-radius: 10px; bottom: -18px; margin-left: -5px;
}
.phone .screen { width: 60px; height: 90px; position: relative; overflow: hidden;
}
.phone .content { background: #fff; width: 60px; left: 0%; margin-left: 0px;
}
.phone .txt { width: 85%;
}
.phone .txt > li { height: 20px;
}
.shadow { position: absolute; width: 350px; height: 15px; left: 50%; margin-left: -175px; z-index: -1; bottom: -20px; background: radial-gradient(ellipse at center, rgba(49,49,49,1) 0%,rgba(60,60,60,1) 53%,rgba(60,60,60,1) 55%,rgba(74,74,74,0) 55%,rgba(74,74,74,0) 100%);
}
.laptop .shadow { width: 450px; margin-left: -225px; bottom: -26px;
}
.keyboard .shadow { bottom: -10px; height: 10px;
}
.phone .shadow { bottom: -30px; margin-left: -50px; height: 10px; width: 100px
}
CSS angled stripes - Script Codes
CSS angled stripes - Script Codes
Home Page Home
Developer Englishextra
Username englishextra
Uploaded January 17, 2023
Rating 3
Size 5,116 Kb
Views 10,115
Do you need developer help for CSS angled stripes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Englishextra (englishextra) Script Codes
Name
QR code generating with vanilla js
JSON based picture gallery with lazyloading
Typeboost.css
Grid 2 Go
Responsive CSS3 Columns with Horizontal Scroll
Metro UI Colors Palettes
Blog Article Template
Parallax.js
Timeline Blueprint
Ready-to-Go Three-columns Responsive Typography Template with Off-Canvas Navigation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!