I created a design in Photoshop that features an edge shaped like this:
Can I use CSS to create a border consisting of repeated triangles?
I created a design in Photoshop that features an edge shaped like this:
Can I use CSS to create a border consisting of repeated triangles?
Gradients can be used to create a unique zig-zag pattern for the background by utilizing the ::after pseudo-element as a border.
.header{
color: white;
background-color: #2B3A48;
text-align: center;
}
.header::after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}<div class="header"><h1>This is a header</h1></div>Reference: CSS Zigzag Border with a Textured Background
Check out the JSFiddle demonstration: http://jsfiddle.net/kA4zK/
For those watching in the future, I stumbled upon this modified version of @extramaster's original response that I found to be a bit more straightforward.
It essentially follows the same concept, but with one less background gradient and allows the base object (.navbar in my code) to shine through instead of embedding the second color directly into the zig-zag pattern.
Check it out on JsFiddle: http://jsfiddle.net/861gjx0b/2/
.header {
position: relative;
color: white;
background-color: #2B3A48;
text-align: center;
}
.navbar {
background: #272220;
height: 20px;
}
.header:after {
content: "";
position: absolute;
display: block;
height: 10px;
bottom: -10px;
/* -height */
left: 0;
right: 0;
/* TODO Add browser prefixes */
background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
background-size: 8px 20px;
/* toothSize doubleHeight */
background-position: 0 -10px;
/* horizontalOffset -height */
}<div class="header">
<h1>This is a header</h1>
</div>
<nav class="navbar"></nav>In my opinion, working with clip-path is more intuitive and straightforward compared to dealing with intricate background gradients.
body {
font-family:Roboto,'Open Sans',Helvetica,sans-serif;
}
.container {
background:#ddd;
margin:0 auto;
max-width:800px;
padding:30px;
}
h1:first-child {margin:0;}
.jagged-bottom {
position:relative;
}
.jagged-bottom:after {
background:#ddd;
content:"";
height:2vw;
position:absolute;
top:100%;
left:0;
right:0;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}<div class="container jagged-bottom">
<h1>Looks Like A Receipt</h1>
<p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>If you're looking to use border-image in CSS3, there are resources available to help guide you through the process. Check out these links for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Or visit this link for additional details:
Creating a unique triangle shape in CSS can be done by adjusting border properties, however this method requires a lot of manual markup generation. It is not recommended to take this approach.
Instead, a more efficient solution would be to use a single image file containing a triangle shape (ideally a transparent .png) and then apply it as a background image using the background-image and background-repeat (repeat-x) properties on a div element acting as the "border".
At present, there isn't a simple way to achieve this effect solely with CSS.
Is there a way to create a panel in bootstrap with specific maximum and minimum lengths? My goal is to set a fixed length for the panel body and enable a scroll bar if the text overflows that length. I've been attempting to increase the length of the ...
Is there a way to make my ReactJS application scroll to screen height with each mouse scroll? And if not, how can I manually set the scroll step for the mouse? Alternatively, I'm looking for a solution to detect the user's mouse step regardless o ...
Currently, my app relies on Material-UI v0.17.0 which is not compatible with React v16.0.0. In order to make it work, I need to upgrade to Material-UI v1.0.0. I came across a migration tool here, but it only updates import statements. Many props have chan ...
My goal is to specifically target the boxes with white dots inside them. Each black box in this picture represents a blog post, even including the larger one at the top. I initially considered using the nth-child selector, but I'm not confident in how ...
After implementing the code below from a helpful CSS Tricks article, my element spanned across the full width of the page, stretching beyond its parent's boundaries: width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin- ...
With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...
Here is the HTML code I am working with: <div id = "search_form" > <h1> Looking for travel ideas? </h1> <div class="input-group"> <form action="" method="get" id = "search-form" > {% csrf_token %} ...
I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...
Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...
Consider the following scenario: <input type='text' /> <br /> <iframe> <input type='text'> </iframe> With the style defined as: input[type='text'] { border: 1px solid black; } If you w ...
When I invoke the script in a function at runtime function CheckOutMyFace() { $.getScript("/scripts/jtimers.js", function (data) { }); }; I notice in Firebug that the script is being called every time the function is invoked, but for some reason the ...
Here is an example of an html table : <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="480px" class="societe" ><div style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION ...
I am currently facing a CSS Grid issue in my portfolio project. Whenever I switch to grid layout during a media query @700px, the last image in my .featured section appears larger compared to the others. This problem arose when I decided to change the lay ...
How can I use the float property to align text and images? The text marked in red should be positioned next to the floating image, but for some reason I am having trouble getting it in the right place. https://i.sstatic.net/gfuu6.png This is my CSS for t ...
I am currently developing a website for a sports event organization company using Angular, HTML/CSS. The focus of this website is on the triathlon sport and it consists of several stages. On the home page, there are five image tags representing each stage ...
Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...
I have currently set up a sequence of 5 frames, where each frame consists of 3 animations that gradually fade into the next frame over time. My challenge is figuring out how to loop the animation after completing the last sequence (in this case, #frame2). ...
I have two lists of model types that are initialized in the controller and values are inserted into them. These list objects are then assigned to ViewData so that I can iterate through them using a foreach loop. However, the issue is that the models of the ...
My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...
The header has the fixed positioning property applied to it, causing the independent section to be impacted by this style rule. header{ position: fixed; top: 0; left: 0; width: 100%; padding: 25px 40px ; display: flex; just ...