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 23 March 2022, Wednesday.

How do I make an css angled stripes?
  1. CSS angled stripes Previews
  2. CSS angled stripes HTML Codes
  3. CSS angled stripes CSS Codes
CSS angled stripes Previews

CSS angled stripes 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 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
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.