RvV 2

Developer
Rosh Jutherford
Size
3,115 Kb
Views
24,288
  1. RvV 2 Previews
  2. RvV 2 HTML Codes
  3. RvV 2 CSS Codes

How do I make an rvv 2?

Somebody suggest a way to round the corners....I was thinking a containing element with rounded corners and overflow:hidden, any other ideas?. What is a rvv 2? How do you make a rvv 2? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.

RvV 2 Previews
IQ Test

RvV 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RvV 2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ background:#e2e3eb; font-family:arial; font-size:14px;
}
body{ position:relative; width:200px; height:200px; margin:0 auto;
}
p{ text-align:center; width:200px; position:absolute; bottom:-50px; color:#422e5d;
}
a{ text-decoration:none; color:inherit;
}
a:hover{ color:#ffd706;
}
/* Blue Triangles */
div:first-of-type{ width: 0px; height: 0px; border-style: solid; border-width: 64px 62px 0 62px; border-color: #7DD2ED transparent transparent transparent; position:absolute; top:-32px; margin-top:50%; left:-62px; margin-left:50%; z-index:1;
}
div:first-of-type:before{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 31px 32px 31px; border-color: transparent transparent #44C6EB transparent; top:-64px; left:-31px;
}
div:first-of-type:after{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #5E90B9 transparent transparent transparent; top:-64px;
}
span{ display:block; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #00ADD4 transparent transparent transparent; top:-32px; left:-31px;
}
/* Green Triangles */
div:nth-of-type(2){ width:0; height:0; border-left:64px solid #579F56; border-bottom:64px solid #8CB75A; position:absolute; top:-32px; margin-top:50%; left:38px; z-index:-1;
}
/* Red Triangles */
div:nth-of-type(3){ width:0; height:0; border-left:64px solid #F69162; border-top:64px solid #F37879; position:absolute; top:-32px; margin-top:50%; left:98px; z-index:-1;
}
/* Orange Triangles */
div:nth-of-type(4){ width: 0px; height: 0px; border-style: solid; border-width: 64px 62px 0 62px; border-color: #CEC72E transparent transparent transparent; position:absolute; top:32px; margin-top:50%; left:-62px; margin-left:50%;}
div:nth-of-type(4):before{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 31px 32px 31px; border-color: transparent transparent #FEC122 transparent; top:-64px; left:-31px;
}
div:nth-of-type(4):after{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #FAA844 transparent transparent transparent; top:-64px;
}
div:nth-of-type(4) span{ display:block; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #FED700 transparent transparent transparent; top:-32px; left:-31px;
}
/* Right Purple Triangle */
div:nth-of-type(5){ width:0; height:0; border-left:64px solid #DC7AA9; border-top:64px solid transparent; position:absolute; top:32px; margin-top:50%; left:98px; z-index:-1;
}
/* Purple Triangles (left) */
div:nth-of-type(6){ width:0; height:0; border-left:64px solid #DC7AA9; border-bottom:64px solid #ac88c2; position:absolute; top:32px; margin-top:50%; left:38px; z-index:-2;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div><span></span></div><!--Blue Triangle-->
<div></div><!--Green Triangles-->
<div></div><!--Red Triangles-->
<div><span></span></div><!--Orange Triangles-->
<div></div><!--Right Purple Triangle-->
<div></div><!--Purple Triangles (left)-->
<p><a href="http://dribbble.com/shots/1109692-RvV-2-animated?list=popular&offset=4">AS SEEN ON DRIBBBLE</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

RvV 2 - Script Codes CSS Codes

html{ background:#e2e3eb; font-family:arial; font-size:14px;
}
body{ position:relative; width:200px; height:200px; margin:0 auto;
}
p{ text-align:center; width:200px; position:absolute; bottom:-50px; color:#422e5d;
}
a{ text-decoration:none; color:inherit;
}
a:hover{ color:#ffd706;
}
/* Blue Triangles */
div:first-of-type{ width: 0px; height: 0px; border-style: solid; border-width: 64px 62px 0 62px; border-color: #7DD2ED transparent transparent transparent; position:absolute; top:-32px; margin-top:50%; left:-62px; margin-left:50%; z-index:1;
}
div:first-of-type:before{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 31px 32px 31px; border-color: transparent transparent #44C6EB transparent; top:-64px; left:-31px;
}
div:first-of-type:after{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #5E90B9 transparent transparent transparent; top:-64px;
}
span{ display:block; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #00ADD4 transparent transparent transparent; top:-32px; left:-31px;
}
/* Green Triangles */
div:nth-of-type(2){ width:0; height:0; border-left:64px solid #579F56; border-bottom:64px solid #8CB75A; position:absolute; top:-32px; margin-top:50%; left:38px; z-index:-1;
}
/* Red Triangles */
div:nth-of-type(3){ width:0; height:0; border-left:64px solid #F69162; border-top:64px solid #F37879; position:absolute; top:-32px; margin-top:50%; left:98px; z-index:-1;
}
/* Orange Triangles */
div:nth-of-type(4){ width: 0px; height: 0px; border-style: solid; border-width: 64px 62px 0 62px; border-color: #CEC72E transparent transparent transparent; position:absolute; top:32px; margin-top:50%; left:-62px; margin-left:50%;}
div:nth-of-type(4):before{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 31px 32px 31px; border-color: transparent transparent #FEC122 transparent; top:-64px; left:-31px;
}
div:nth-of-type(4):after{ content:" "; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #FAA844 transparent transparent transparent; top:-64px;
}
div:nth-of-type(4) span{ display:block; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 32px 31px 0 31px; border-color: #FED700 transparent transparent transparent; top:-32px; left:-31px;
}
/* Right Purple Triangle */
div:nth-of-type(5){ width:0; height:0; border-left:64px solid #DC7AA9; border-top:64px solid transparent; position:absolute; top:32px; margin-top:50%; left:98px; z-index:-1;
}
/* Purple Triangles (left) */
div:nth-of-type(6){ width:0; height:0; border-left:64px solid #DC7AA9; border-bottom:64px solid #ac88c2; position:absolute; top:32px; margin-top:50%; left:38px; z-index:-2;
}
RvV 2 - Script Codes
RvV 2 - Script Codes
Home Page Home
Developer Rosh Jutherford
Username the_ruther4d
Uploaded September 04, 2022
Rating 4
Size 3,115 Kb
Views 24,288
Do you need developer help for RvV 2?

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!

Rosh Jutherford (the_ruther4d) Script Codes
Name
Flat Logo by Henrik Dahlheim
Lazy Load for Background Images
Pre-loader 1 by Chris Hall
Apple iPhone 5s style scrolling
Icons
Beautiful Login Form
Hover effect demo
A Pen by Rosh Jutherford
Flame by Kenji Droullard
Finn by Meg Robichaud
Create amazing marketing copy 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!