I have to create image like this using CSS:-
If not possible then how can I use this with minimum image size? Like in below code I have used two images but this is also not working...
<div style="background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">
</div>
Also possible with masking without using image. This is more flexible. You can control easily the slope by changing the variable.
.container {
--slope: 100px;
width: 100%;
height: 500px;
--mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat,
linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}
<div class='container'></div>
something like this would work:
div.cont:before {
content: '';
background-image: url(https://i.stack.imgur.com/2i7ed.png);
background-size: 100% auto;
position: absolute;
top: 44px;
left: 0;
right: 0;
bottom: 0;
}
<div class="cont" style="width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">
</div>
a trivial task using clip-path
.container {
height: 400px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(90% 100% at bottom); /* simply adjust the 90% */
}
<div class='container'></div>
To have the same curvature on resize use pixel value
.container {
height: 400px;
max-width:800px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(600px 100% at bottom);
}
<div class='container'></div>
.element {
width: 200px;
height: 200px;
border-radius: 100% 100% 0 0 / 20% 20% 0 0;
background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
}
You can use CSS Gradient to get this kind of result. You can also use some tools online to generate some gradients like this one:
https://cssgradient.io/
.container {
width: 500px;
height: 500px;
background: rgb(133,132,242);
background: linear-gradient(90deg, rgba(133,132,242,1) 0%, rgba(35,136,253,1) 50%, rgba(127,237,226,1) 100%);
}
<div class='container'>
</div>
Related
I have two DIVs over the top of a single background image. I want to darken all areas around the two DIVs and keep the image unaffected within the two DIVS, creating a kind of spotlight effect.
I tried using shadows around the DIVs but both cast a shadow over each other.
Is there any way to darken all areas outside of the 2 DIVS?
E.g.
<div class="background-image">
<div class="light-area-1"></div>
<div class="light-area-2"></div>
</div>
If there are just two 'spotlights' and the effect is to be purely visual you could use pseudo elements and clip-paths to overlay the spotlights:
.spotlit {
--bg: url(https://picsum.photos/id/1015/200/300);
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg);
background-size: cover;
width: 80vmin;
height: 70vmin;
position: relative;
}
.spotlit::before,
.spotlit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
top: 0;
left: 0;
background-image: var(--bg);
background-size: cover;
}
.spotlit::before {
clip-path: polygon(20% 20%, 50% 20%, 50% 40%, 20% 40%);
}
.spotlit::after {
clip-path: polygon(70% 60%, 90% 60%, 90% 95%, 70% 95%);
}
<div class="spotlit">
</div>
However, if the spotlights are needed as actual elements a similar approach lays them above the main, shadowed element using clip-path as above. This way you can have as many spotlights as required.
.background-image {
--bg: url(https://picsum.photos/id/1015/200/300);
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg);
background-size: cover;
width: 80vmin;
height: 70vmin;
position: relative;
}
.light-area-1,
.light-area-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--bg);
background-size: cover;
}
.light-area-1 {
clip-path: polygon(20% 20%, 50% 20%, 50% 40%, 20% 40%);
}
.light-area-2 {
clip-path: polygon(70% 60%, 90% 60%, 90% 95%, 70% 95%);
}
<div class="background-image">
<div class="light-area-1"></div>
<div class="light-area-2"></div>
</div>
The shapes can be changed given clip-path's various options such as circle which may be useful to make them look more like an actual spotlight.
Hi i want effect like this on my div but only at the bottom:
What im doing right now is this:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
width: 100%;
height: 100px;
background: #FE7448;
-webkit-mask: radial-gradient(circle 20px, transparent 97%, #fff 100%) top/50px 200%;
// not working:
// -webkit-mask: radial-gradient(circle 20px, #FE7448 97%, #FE7448 100%) top/50px 200%;
}
<div class="container">
<div class="box"></div>
</div>
Which property in mask allows me to give color to circle? Whole mask property is confusing to me.
You can do it like below:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
height: 100px;
background: #FE7448;
-webkit-mask:
linear-gradient(#fff 0 0)
top/100% calc(100% - 20px) no-repeat,
radial-gradient(circle closest-side, #fff 97%,transparent 100%)
bottom/50px 40px space;
}
<div class="container">
<div class="box"></div>
</div>
Using CSS variables to easily manage it:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
--r:20px; /* radius */
--d:10px; /* minimum distance between circles */
height: 100px;
background: #FE7448;
-webkit-mask:
linear-gradient(#fff 0 0)
top/100% calc(100% - var(--r)) no-repeat,
radial-gradient(circle closest-side, #fff 97%,transparent 100%)
bottom/calc(2*var(--r) + var(--d)) calc(2*var(--r)) space;
}
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box" style="--r:30px;--d:0px;"></div>
</div>
There's a lot of questions similar to this but they're for edges or have answers incompatible with some browsers. I'd thought of using a gradient image for the background but can achieve the same effect using a background gradient and I'd guess this may be easier to implement with minimal code.
I currently have this, which has flat edges;
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
}
<div class="top"></div>
<div class="main"></div>
It uses minimal code but I'd be aiming for an angled edge either on the bottom of one and on the top of the other or just the bottom of the top one so that the DIVs match up.
I'd be aiming for something like this…
Of course I could rotate the DIV but then there's overflow. I want something clean so that both DIVs match up. Something using clip-path: polygon could work but I can't figure out the angles or implementation. Any ideas or resources for where to start would be apprecited.
UPDATE
I've figured out how to angle both so that they match up but the DIVs need to be touching for it to look proper.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
}
<div class="top"></div>
<div class="main"></div>
UPDATE 1
Would this work? I added position: relative; and top: -150px; to move it up.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
<div class="top"></div>
<div class="main"></div>
I found how to split page with vertical line - see jsfiddle:
The code is below -
body {
background-color: white;
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: black;
z-index: 1;
}
#content {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
color: red;
font-family: Arial, sans-serif;
}
Now I would like to replace vertical line with polyline to get something like this:
How can I do it with CSS?
P.S. I can not use background image, since polyline can be different (the points will have different coordinates).
You can consider multiple background to achieve this but it may be tricky to find the different values depending on the shape. It's basically a combination of triangle shape and rectangle shape above each other to create the final layer (changing the colors will help you identify each one)
body {
margin:0;
}
.box {
height:100vh;
background:
linear-gradient(to bottom right,#000 49.8%,transparent 50%) 0 0/70% 120%,
linear-gradient(to top right,#000 49.8%,transparent 50%) 0 0/60% 70%,
linear-gradient(#000,#000) 0 100%/50% 31%,
linear-gradient(to bottom right,#000 49.8%,transparent 50%) 55.3% 100%/10% 30.2%;
background-repeat:no-repeat;
}
<div class="box">
</div>
You can also consider clip-path within a pseudo element and it will be easier (https://bennettfeely.com/clippy/)
body {
margin:0;
}
.box {
height:100vh;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:20%;
background:#000;
-webkit-clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
}
<div class="box">
</div>
For a website I'm developing I need to include some diagonal shaped borders to a div. These are the main examples which I need to recreate.
double diagonal top border, triangle shaped
Now been scouting the web on how to achieve this, and my first thought as well would be by using ::before. However I can't get it to work without it being positioned absolute which messes up the entire page.
This is my code I have tried to achieve something like this:
.slider-container{
background-color: $blue;
width: 100%;
overflow: hidden;
position: relative;
.col-md-3{
img{
padding: 40px;
width: 100%;
max-width: 400px;
margin: auto;
}
}
&::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
}
<section id="slider">
<div class="container-fluid">
<div class="row slider-container">
<div class="col-md-3">
<p>imgae 1</p>
</div>
<div class="col-md-3">
<p>imgae 2</p>
</div>
<div class="col-md-3">
<p>imgae 3</p>
</div>
<div class="col-md-3">
<p>imgae 4</p>
</div>
</div>
</div>
</section>
Note: it won't work in here but this is the result I get result
With just css and a bit tweaking based on your divs size you could create something like this:
.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}
.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>
Edit: Just tested this in chrome, you might need special linear-gradients for older/other browsers.
The most simple way to achieve this would probably be to use a background image, though the effect may prove to be inconsistent on smaller devices. For this reason, you may want to consider using a hard-stop gradient.
.grad {
background: lightblue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
width: 100%;
padding: 20px;
}
<div class="grad">
<h1>Hard-stop gradient</h1>
<p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>
Using this, you can create a gradient from 0% to 15% that is white on both ends, followed by a gradient from 15% to 100% that's fully black. This completely removes the fading effect, giving you your angled background. It's probably the most efficient way as well since it only requires one line of CSS.
Something like this?
div {
background: yellow;
height: 150px;
overflow: hidden;
position: relative;
width: 300px;
}
div::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
<div></div>
You can use clip-path.
body {
margin: 0;
padding: 0;
color: #ffffff;
}
.wrapper {
min-height: 100vh;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
background-color: red;
}
.bg {
min-height: 100vh;
min-width: 100vw;
background-color: blue;
clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
<div class="bg"></div>
</div>
For me, the linear-gradient is not smooth ...
I would suggest either clip-path or svg:
svg {
display: block;
width: 100%;
height: 55px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="white" />
</svg>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid green;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}