This question already has answers here:
Create wavy borders in CSS for top and bottom borders
(2 answers)
Closed 8 months ago.
This post was edited and submitted for review 8 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm trying to make a wavy effect on the border of where one section meets another on a page (see pic below). What's the best approach to take here? The waves should be roughly equal in size.
EDIT: to the person who flagged this as 'already answered', the effect in your linked question looks nothing like this one. That effect cannot be used to make the low wide sloping waves in my image.
Please try this
body {
background: #333;
}
.wrapper {
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
overflow: hidden;
}
.wave {
width: 1000px;
height: 1025px;
position: absolute;
top: -25%;
left: 50%;
margin-left: -500px;
margin-top: -500px;
border-radius: 35%;
background: rgba(255, 255, 255, .75);
animation: wave 15s infinite linear;
}
#keyframes wave {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="wave"></div>
</div>
Related
This question already has answers here:
Center triangle at bottom of div full width responsively
(6 answers)
Create bottom responsive arrow [duplicate]
(1 answer)
Closed 1 year ago.
I am working upon creating a HTML page that will have text written under shape, see pic for the reference. To draw this shape, I am using following:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
<div style="width: 100%">
<div id="chevron">
</div>
</div>
However, the shape is pretty different than what I am trying to draw.
Here is the desired result:
You could use clip-path this website is great to get the hang of it
in your case you would need something like this :
clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I have a very long image that I want to animate (translate)
found some code that helped me to make an animation but not sure is it possible to merge it with hover on another DIV where are arrows
is it possible to do that without any JS?
here is CODEPEN
and code so far:
.wrapper {
overflow: hidden;
position: relative;
}
.arrow-left {
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(to right, blue, transparent);
width: 200px;
}
.arrow-left:hover~.sliding-background {
animation-direction: reverse;
}
.arrow-right {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: linear-gradient(to left, red, transparent);
width: 200px;
}
.sliding-background {
background: url("https://upload.wikimedia.org/wikipedia/commons/6/62/Element-haeufigkeit.svg");
height: 500px;
width: 3000px;
animation: slide 8s linear;
}
#keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1000px, 0, 0px);
}
}
<div class="wrapper">
<div class="sliding-background"></div>
<div>
<img class="arrow-left" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_144x144.png" />
<img class="arrow-right" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_144x144.png" />
</div>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...
There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.
I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.
This is the original CSS code I was experimenting with to get the results I need...
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
Here is the HTML....
<div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>
Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I found a nice codepen and started playing with it:
http://codepen.io/georgehastings/full/xgwxgo
The problem is that I can't seem to make the black background-color of my div appear so that the glowing stays BEHIND the div and not ontop of it.
My current situation:
http://codepen.io/anon/pen/xgavRb
What have I done wrong ?
I am looking for an effect similar to this:
http://assets.razerzone.com/eeimages/products/25594/firefly-cloth-tech-bg.jpg
You need to use another element instead of the :after, see this as an example:
body {
background: black;
}
.homeTitle {
z-index: 14;
position: relative;
text-align: center;
color: #252B37;
background-color: black;
color: white;
font-size: 50px;
margin-top: 20vh;
width: 100px;
margin-bottom: 7vh;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: gamers;
border-radius: 20px;
/* animation: textColor 10s ease infinite;*/
}
.homeTitleBack {
position: absolute;
content: "";
left: 40%;
top: 17px;
z-index: -1;
height: 47%;
width: 20%;
margin: auto;
transform: scale(0.75);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background-size: 200% 200%;
animation: animateGlowing 10s ease infinite;
}
#keyframes animateGlowing {
0% {
background: #FF0000;
}
33% {
background: #7e0fff;
}
66% {
background: #0053FF;
}
100% {
background: #FF0000;
}
}
#keyframes textColor {
0% {
color: #7e0fff;
}
50% {
color: #0fffc1;
}
100% {
color: #7e0fff;
}
}
<div class="homeTitleBack"></div>
<div class="homeTitle">Test</div>
z-index of a child element will always be higher than the z-index of its parent, despite what you set in the CSS.
You can use a :before pseudo element in front of the :after pseudo element however.
Just use one div for the effect and another for the black box
<div class ="homeTitle">
<div style="background: black">Test</div>
</div>