I am trying to use div to make different geometrical figures like the below image at
I tried using radial-gradient css property to obtain the following figure but is not getting the desired result .
<div class="container"></div>
<div class="line"></div>
<hr class="horizontal-line">
.container {
margin: 0 auto;
width: 300px;
height: 300px;
background: radial-gradient(110% 150% at bottom, transparent
50%, lightblue 51%);
}
.line{
margin:5px auto;
width:2px;
height:300px;
background-color:grey;
}
hr .horizontal-line{
width:10px;
border:2px grey;
}
Related
I want to do the following and until now I neither got it to work on my own nor did I find something similar online. I am building a page that will not be scrollable and I want a white background but with a rainbow stripe at the bottom of the page.
I kinda got it to work like this with a div (I tried it as a background for the whole page, but it blurres because css doesn't crop the image, it compresses it):
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
background: white url('../img/rainbow.jpg') no-repeat bottom fixed;
background-size: contain;
}
But the problem with this code is, that it does not scale properly: Passing a certain point the image isn't visible all the way, because it gets cut on both sides(left and right) the hight works.
I hope y'all know what I want to do.
Thanks in advance
Instead of using an image, you could achieve that with HTML and CSS.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
}
.color {
position: relative;
float: left;
height: 100%;
width: calc(100% / 6);
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
#orange {
background: orange;
}
#red {
background: red;
}
#purple {
background: purple;
}
<div class="rainbow">
<div id="blue" class="color"></div>
<div id="green" class="color"></div>
<div id="yellow" class="color"></div>
<div id="orange" class="color"></div>
<div id="red" class="color"></div>
<div id="purple" class="color"></div>
</div>
Use gradient as background and no need image or a lot of code:
html {
min-height:100%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0)
bottom/100% 10% no-repeat;
}
Or if you want it inside a fixed element:
.box {
position:fixed;
bottom:0;
left:0;
right:0;
height:10%;
background:
linear-gradient(to right,
blue calc(1*100%/6),
green calc(1*100%/6) calc(2*100%/6),
yellow calc(2*100%/6) calc(3*100%/6),
orange calc(3*100%/6) calc(4*100%/6),
red calc(4*100%/6) calc(5*100%/6),
purple 0);
}
<div class="box"></div>
height: 10%; will scale the thickness. If you want the thickness consistent when you resize, just use px instead. I found 75px was about the same size as 10% when in full screen.
For the image, I just increased the width of your image to 2500x905 px This scaled nicely with no blur in both my monitors.
.rainbow {
position: fixed;
height: 10%;
width: 100%;
bottom: 0px;
left: 0px;
background: white url('http://foregotten.net/imgs/pen/rainbow1.jpg') no-repeat bottom fixed;
background-size: contain;
}
https://jsfiddle.net/Foregotten/5yLev3bf/6/
I'm working on a website and I need to cut off the top left corner of the main body.
After that I want to apply a shadow on the main body. This shadow should not go around the original box it should follow the main body with the new cut off corner - I used drop-shadow for this.
I tried using gradient background but no matter what I try my header is either overlapping the main body or the shadows don't work
My current attempt is this: https://codepen.io/Sophvy/pen/MWgMZzG
HTML:
<div id ="main1">
<div id ="wrap"></div>
<header>
</header>
<main>
</main>
</div>
CSS:
#main1 {
height:500px;
width:500px;
position:relative;
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
filter: drop-shadow(0px 0px 10px blue);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
My Issue here is that the header doesn't get cut off so its just overlapping.
I tried using z-index but couldn't get it to work even with position:absolute / relative on each element. I looked at a lot of different ideas but I haven't found any that handle the same problem that I'm having with my header.
What do I need to change to cut off the corner of the main body and the header, and then afterwards get a working shadow?
EDIT: my solution
HTML:
<div id="background">
<div id ="main1">
<div id ="wrap">
<header>
header
</header>
<main>
main
</main>
</div>
</div>
</div>
CSS:
#background {
height:500px;
width:600px;
padding-top: 5px;
background-color:#bbb;
padding-bottom: 5px;
}
#main1 {
margin: 10px auto;
width: 90%;
height:400px;
text-align:right;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
You where very close!
If you use a clip-path you can cut both the header and the main part of the box.
When you then set the drop-shadow filter on the main element you should get the desired style.
#main1 {
height:500px;
width:500px;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
<div id ="main1">
<div id ="wrap">
<header>
</header>
<main>
</main>
</div>
</div>
Similair question can be found here:
CSS: How to fit an image in a circle where bottom is clipped but top pops out?
However, I would like to have the red outline replaced by an image, e.g.:
I tried among others :before and :after psuedo tags but did not find the soluition. Which direction I should look to achieve this?
You can use multiple background like this:
.box {
width:200px;
height:210px;
border-radius: 0 0 50% 50%/0 0 70% 70%;
background:
url(https://i.stack.imgur.com/bdZeE.png) center/cover,
url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
position:relative;
}
.box:after {
content:"";
position:absolute;
z-index:1;
bottom:0;
top:50%;
left:0;
right:0;
background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}
<div class="box">
</div>
You can also control the image inside using CSS variable:
.box {
width:200px;
height:210px;
border-radius: 0 0 50% 50%/0 0 70% 70%;
background:
var(--image) center/cover,
url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
position:relative;
display:inline-block;
}
.box:after {
content:"";
position:absolute;
z-index:1;
bottom:0;
top:50%;
left:0;
right:0;
background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}
<div class="box" style="--image:url(https://i.stack.imgur.com/bdZeE.png)">
</div>
<div class="box" style="--image:url(https://i.stack.imgur.com/7A8fP.png)">
</div>
The transparent line I am looking to achieve is this:
The most closest I have got to it is this using gradient:
The css for gradient is:
.login {
background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%), url("bg-image.jpg");
}
I am only interested in getting the same transparent line.
What should I do?
You can use linear-gradient as follow:
.box {
width:400px;
height:200px;
background:
linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
url(https://lorempixel.com/400/200/);
}
<div class="box">
</div>
Here is example of one possible solution:
.wrap{
height:350px;
width:100%;
background: linear-gradient(red, yellow);
display:flex;
flex-flow:column;
justify-content:center
}
div div{
background-color:rgba(256,256,256,0.35);
height:100px;
width:100%;
}
<div class="wrap">
<div>
</div>
</div>
I believe you are looking for something like this. This uses flexbox to align the white 'line' vertically in the center of the image. The transparent background of the white line is done by simply using rgba color.
The advantage of this method is, that the height of the white line will scale with it's content.
.background-image {
background: url('https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85740266a52ea733187e9775fdf8d2d5&auto=format&fit=crop&w=1567&q=80') no-repeat center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.background-image__white-line {
background:rgba(255,255,255,0.5);
}
.background-image__white-line__content {
margin: auto;
max-width: 400px;
padding: 40px;
}
<div class="background-image">
<div class="background-image__white-line">
<div class="background-image__white-line__content">
Whatever you want
</div>
</div>
</div>
Edit
Simplified the css code, thanks to Termani Afif!
So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :)
Using gradients with angles is not fit for your case because (as already pointed out by King King in comments) as the width the increases, the angle of the gradient (or) the color stop percentages need to be modified to maintain the shape. That is very tricky and so this method can be employed only when the shape has fixed dimensions.
However gradients can still be used with the to [side] [side] syntax because gradients defined using this syntax can adapt to variations in container sizes. In this method no pseudo-elements are used.
$(document).ready(function() {
$('#increase').on('click', function() {
$('.gradient').css('width', '300px').css('height', '500px');
})
})
div {
display: inline-block;
vertical-align: top;
height: 300px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
}
.gradient {
padding: 10px;
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 100px, 100% 100%;
background-position: 0% 100%, 0% -100px;
}
/* Just for demo */
body {
background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue);
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient">Some content</div>
<br>
<br>
<button id="increase">Increase Width & Height</button>
Note that it is better to make sure that the text doesn't flow into the slanted section of the shape because wrapping the text around to fit within the shape is not straight-forward.
I have attempted to make that in css as per ur image. http://jsfiddle.net/3zkme/- See if this could help. Thanks.
HTML
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
CSS
.trapezoid{
top: 150px;
vertical-align: middle;
border-bottom: 120px solid red;
border-left: 200px solid transparent;
border-top-left-radius:0px;
height: 0;
width: 150px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}
/* ---------- */
.trapezoid {
position:relative;
}
.trapezoid:after {
content:' ';
left:-14px;
top:10px;
position:absolute;
background:red;
border-radius:0px 0 0 0;
width:164px;
height:40px;
display:block;
}
You do not use a gradient for this, you just need to use a pseudo-element like :after.
Sample code:
#bookmark {
width: 50px;
height: 100px;
position: relative;
background: red;
}
#bookmark:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 35px solid #FFF;
border-right: 50px solid transparent;
}
Live JSFiddle
If you want the shape to be filled in with a gradient, you can do that, too. Just add that to the CSS:
background: linear-gradient(to right, #ff0000 0%,#B00000 100%);