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 5 years ago.
Improve this question
I have on the left a css Gradient, and on the left a slider with images.
How can i combine the two, so that the images on the right take the shape like on the images below ?
UPDATE
HTML
<div class="row shape-background">
</div>
CSS
.shape-background {
text-align: center;
background: -moz-linear-gradient(125deg, #e20613 25%, white 25%);
background: -webkit-linear-gradient(125deg, #e20613 25%, white 25%);
background: -o-linear-gradient(125deg, #e20613 25%, white 25%);
background: -ms-linear-gradient(125deg, #e20613 25%, white 25%);
the problem is that when i add another backgroud image on the righr side of the same div, the linear gradient does not work.
Should i make my slider with img tag, or can i achieve this use case with background images ?
background: linear-gradient(125deg, #e20613 25%, white 25%);
}
demo from my comment:
body {
margin: auto;
height: 200px;
width: 300px;
background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);
border:solid;
}
html {
display:flex;
height:100%;
background:white;
}
but this doesn't make a slider.
example of a css slider with image in the HTML
Related
body>div {
background-color: red;
}
<div>Need more here</div>
Can someone help with creating the same background as on the bootstrap main page?
I tried with the gradient, but it doesn't work.
I can't get the 4 colors that come together in white in the middle.
.bs {
aspect-ratio: 1/1;
background-image: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1) 85%), radial-gradient(ellipse at top left, rgba(13,110,253,0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132,0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846,0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132,0.5), transparent 50%);
}
<div class="bs"></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 1 year ago.
Improve this question
I want to create this shape using CSS:
I used clip-path before but it only makes polygons but I'm trying to make it curvy
If you want to use CSS only you can use ellipse within a clip-path.
.shape {
background: orange;
width: 80px;
height: 100px;
}
.shape:after {
content: '';
background: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: ellipse(100px 120px at -10px -10px);
}
<div class="shape"></div>
The disadvantage of this is that clip-path only allows you to select which parts to keep, not which parts to remove. This means that the cut-out part will be white not transparent.
As you can see, we're not cutting the orange part, but adding the white circle on top of an orange background.
If you want a specific shape you might be better of with using an SVG as Andrew suggested in his answer.
Try this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.2 100"><defs><style>.cls-1{fill:#f7931e;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M69.2,100H0C39.29,81.25,57.14,33,69.2,0Z"/></g></g></svg>
Creating svg curves is rather complicated, so it is often best to use a tool to assist. I created the above code used Adobe Ilustrator. Learn more here: https://www.w3schools.com/graphics/svg_path.asp
If you want the cut-out parts to be transparent then radial-gradient may be helpful.
e.g.
div {
background-image: radial-gradient(at -20vmin -60vmin, transparent 0%, transparent 80%, orange 80%, orange 100%);
height: 80vmin;
width: 60vmin;
}
<div></div>
Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading.
I tried something like this but it doesn't work.
body {
height: 100vh;
background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.
CSS:
#container{
height: 100vh;
background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}
body {
background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Page:
<div id="container">
// put page code in here like it was body
</div>
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 2 years ago.
As seen in the picture, the background colour is magenta and the button is white.
Right bottom corner of the button is not either rectangular or rounded but kind of slash off.
Can I achieve this using CSS?
Here is the example with new property clip-path.
You can do experiments on https://bennettfeely.com/clippy/ site
div {
width: 100px;
min-height: 50px;
clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
background: lightblue;
}
<div class="btn">
button
</div>
I want to create a CSS background for a HTML5 section and it should look like this:
css triangle:
I have already researched and tried stuff like transform skew or border manipulation. But i can t really achieve the view like i want to.
Is any CSS pro here ? Would be nice.
ps - if a bootstrap solution exists would also help me.
Greets
Tobias
Use a linear-gradient
* {
margin: 0;
psdding: 0;
}
div {
height: 100vh;
width: 100vw;
background-color: blue;
background-image: linear-gradient(10deg, lightblue 50%, transparent 50%), linear-gradient(-60deg, brown 30%, transparent 30%);
}
<div>
</div>