How can I add a jagged edge on to the left side instead of having it position on the right side? I tried changing background position etc but with no luck, any ideas? thanks
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(-45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(-135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: left top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
left: -10px;
}
<div>test</div>
Here's the few differences that I made:
https://www.diffchecker.com/fq7w3utq
Related
Need to align the css generated border vertically...how do i use background-repeat: repeat-y here :
.container::after {
position:absolute;
bottom: -50px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #535353 26%, gray 40%);
background-color: gray;
background-size:50px 100px;
height:50px;
background-repeat: repeat-x;
}
Thanks
You need to convert the vertical values to horizontal values, and vice versa:
.container {
position: relative;
width: 50%;
height: 100vh;
}
.container::after {
position: absolute;
right: -50px; /* bottom: -50px; */
top: 0; /* left: 0 */
width: 50px; /* width: 100% */
height: 100%; /* height: 50px; */
content: "";
background: radial-gradient(circle at 0% 50%, white 45%, #535353 46%, gray 60%);
background-color: gray;
background-size: 50px 50px; /* background-size: 50px 100px; */
background-repeat: repeat-y; /* background-repeat: repeat-x; */
}
<div class="container"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a zigzag-edge (I have no idea how to call it, I'm not English) and a wave-edge.
More specific: I need to create this:
The top part of the blue element has to be a wavy kind of border, where the top part is transparent so the underlying image shows 'through the element', so to say.
Is this do-able with CSS? I'd rather not use images, simply because there will be multiple elements like these, with different colours (that means different edge colours per element).
It's relatively easy to draw a border like that with a couple of pseudo-elements.
First we draw the bottom of the wave:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, maroon 13px);
}
<div class='wave'></div>
We then fill every other ditch with the background of another pseudo-element. This background is twice as wide so we only fill the odd ditches.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, crimson 12px, transparent 13px);
}
<div class='wave'></div>
Combining the two gives us the desired effect:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}
<div class='wave'></div>
Updated with a flatter wave.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before, .wave::after{
border-bottom: 5px solid yellow;
}
.wave::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image:
radial-gradient(circle at 10px -15px, transparent 20px, yellow 21px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image:
radial-gradient(circle at 10px 26px, yellow 20px, transparent 21px);
}
<div class='wave'></div>
Try-
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div><div id="wave"></div>
Even though it's black, it shows as a light gray. i don't want the dots bigger.
https://jsfiddle.net/bek17q3t/1/
body,html
{
background-color: #e7e6e6;
height: 100%;
}
div
{
position: relative;
top: 10px;
left: 30px;
width: .25em;
height: 100%;
background-image: radial-gradient(circle closest-side,#000000 calc(100% - .25em),transparent 100%);
background-repeat: repeat-y;
background-size: .25em .75em;
}
body,html
{
background-color: #e7e6e6;
height: 100%;
}
div
{
position: relative;
top: 10px;
left: 30px;
width: .25em;
height: 100%;
background-image: radial-gradient(circle closest-side,#000000 calc(100% - .1em),transparent 100%);
background-repeat: repeat-y;
background-size: .25em .75em;
}
<div>
</div>
Change the calculation.
How to replicate this image in css to serve as a background for text?
(It's kind of hard to see but they're individual squares, not dots.)
The squares should be transparent as well.
Also it is possible to code it to control the opacity of each horizontal line of squares in css?
1. Here's one way of doing it using pseudo-elements, adjust the values to your liking:
Snippet:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
.checkered-bg {
width: 100%;
height: 100%;
color: white;
}
.checkered-bg::before, .checkered-bg::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
.checkered-bg::before {
background-image:
linear-gradient(black 50%, transparent 50%),
linear-gradient(to right, grey 50%, black 50%);
background-size: 20px 20px;
}
.checkered-bg::after {
background-image: linear-gradient(black, transparent);
}
<div class="checkered-bg">CONTENT</div>
View on JSfiddle.
2. Another way to make the squares and have the area around them transparent. But in order to get the top rows more translucent you will need a solid color:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
.checkered-bg {
width: 100%;
height: 100%;
color: black;
}
.checkered-bg::before, .checkered-bg::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
.checkered-bg::before {
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%);
background-size:20px 20px;
background-position:0 0, -10px -10px;
}
.checkered-bg::after {
background-image: linear-gradient(#808080, transparent);
}
<div class="checkered-bg">CONTENT</div>
View on JSfiddle
Option #2 smaller squares - JSfiddle
I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are
See the following fiddle: http://jsfiddle.net/ovb597yq/
<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-
gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>
.
body{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
Where its white I am trying to make it transparent but its not currently happening
Any ideas?
You need to apply it on :after :pseudo-element and change #fff to transparent.
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>