Angle Border

Developer
Kevin Alford
Size
2,505 Kb
Views
6,072
  1. Angle Border Previews
  2. Angle Border HTML Codes
  3. Angle Border CSS Codes

How do I make an angle border?

Messing around with clipping and transforms. What is a angle border? How do you make a angle border? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

Angle Border Previews
IQ Test

Angle Border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angle Border</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! */ @import url(https://fonts.googleapis.com/css?family=Rambla);
/* CMY (or tango or retro or solar close values)*/
body
{ background-color: #babdb6; padding: 50px; font-family: 'Rambla', sans-serif;
}
.content { color: #2e3436; position: relative; top: -485px; left: 190px; text-shadow: 0px 1px 20px #999;
}
.content span { border-bottom: 2px dashed #babdb6;
}
.clipper { height: 100px; width: 500px; overflow: hidden;
}
.rotator { transform: rotate(45deg); position: relative;
}
.border
{ border-left: 1px solid black; height: 500px; width: 300px; /* width: 215 for arrow/slant */ /* 300 for pyramid */ background-color: #d3d7cf;
}
.one { border-width: 30px; border-color: #cc0000; position: relative; top: -30px; /* top: -30 for pyramid */ /* -60 for arrow */ /* -100 for slant */ left: -30px; box-shadow: 0px 1px 20px #999;
}
.two { border-width: 20px; border-color: #75507b;
}
.tre { border-width: 10px; border-color: yellow;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <br>
<div class="clipper"> <div class="rotator"> <div class="border one"> <div class="border two"> <div class="border tre"> &nbsp; </div> </div> </div> </div> <div class="content"> <h2><span>Retro Border Fun</span></h2> </div>
</div>
</body>
</html>

Angle Border - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Rambla);
/* CMY (or tango or retro or solar close values)*/
body
{ background-color: #babdb6; padding: 50px; font-family: 'Rambla', sans-serif;
}
.content { color: #2e3436; position: relative; top: -485px; left: 190px; text-shadow: 0px 1px 20px #999;
}
.content span { border-bottom: 2px dashed #babdb6;
}
.clipper { height: 100px; width: 500px; overflow: hidden;
}
.rotator { transform: rotate(45deg); position: relative;
}
.border
{ border-left: 1px solid black; height: 500px; width: 300px; /* width: 215 for arrow/slant */ /* 300 for pyramid */ background-color: #d3d7cf;
}
.one { border-width: 30px; border-color: #cc0000; position: relative; top: -30px; /* top: -30 for pyramid */ /* -60 for arrow */ /* -100 for slant */ left: -30px; box-shadow: 0px 1px 20px #999;
}
.two { border-width: 20px; border-color: #75507b;
}
.tre { border-width: 10px; border-color: yellow;
}
Angle Border - Script Codes
Angle Border - Script Codes
Home Page Home
Developer Kevin Alford
Username zeroeth
Uploaded January 07, 2023
Rating 3
Size 2,505 Kb
Views 6,072
Do you need developer help for Angle Border?

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!

Kevin Alford (zeroeth) Script Codes
Name
960 grid layout
Glsl.heroku.com sandbox
Animation Sine Movement
A Pen by Kevin Alford
Css text wave
Twitter Bootstrap Grids
How not to code a website
Website Design Basics
Browser language
Simple responsive 2 col
Create amazing blog posts 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!