* {
    box-sizing: content-box;
}

body {
    background: white;
}

.pattern-1 {
    height: 900px;
    float: left;
    position: absolute;
}

.pattern-2 {
    height: 800px;
    opacity: 0.5;
    overflow: auto;
    float: left;
    margin: 0px;
}

.pattern-3 {
    height: 900px;
    opacity: 0.5;
    float: left;
}

pattern-4 {
    height: 300px;
    opacity: 0.5;
    overflow: auto;
    float: left;
}


/**.circle1 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 80px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.circle2 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 10px;
    position: absolute;
    top: 00px;
    left: 50px;
}

.circle3 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 150px;
    position: absolute;
    top: 0px;
    left: 100px;
}

.circle4 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 150px;
}

.circle5 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 150px;
    position: absolute;
    top: 0px;
    left: 200px;
}

.circle6 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 250px;
}

.circle7 {
    width: 100px;
    height: 100px;
    border-style: dotted;
    border-radius: 80px;
    position: absolute;
    top: 0px;
    left: 300px;
}

.circle-fill {
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 50px;
    float: left;
    position: absolute;
    top: 0px;
    left: 25px;
}
**/

.diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: black;
    position: relative;
    top: -50px;
}

.diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

.line1 {
    width: 300px;
    height: 800px;
    position: absolute;
    top: 10px;
    left: 10px;
}

.line2 {
    width: 300px;
    height: 800px;
    margin: 100px auto;
    position: absolute;
    top: -90px;
    left: 110px;
}

.line3 {
    width: 300px;
    height: 800px;
    margin: 100px auto;
    position: absolute;
    top: 0px;
    left: 110px;
}

.pattern-4 {
    height: 500px;
    /* create pattern-3 CSS here */
}