This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 1 year ago.
I wanna make this shape ( the black color one, on the left side ) : https://www.awesomescreenshot.com/image/10535419?key=066637f6e5d498e80eb0bdee9eee8372
My idea is to create a triangle down shape and scale it, then use transform:translate() to move the shape. Is there any better or easier way to got this shape?
Use clip-path this website is a great tool to help you get the hang of it, in your case you would need something like this
.shape {
width : 250px;
height : 400px;
background-color : #1a1a1a;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}
<div class="shape">
</div>
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 9 months ago.
As the title says I am trying to add a gradient background to the one page on my website. I am currently doing this in CSS:
body {
background: rgb(85,205,252);
background: linear-gradient(45deg, rgba(85,205,252,1) 0%, rgba(255,255,255,1) 35%, rgba(247,168,184,1) 100%);
}
But doing it this way makes the gradient jagged and not very smooth.
View on JSFiddle
It should be looking like this
This is because the gradient is repeating over and over. It is doing this as it is the same size as <body>, which is actually very small as there is only that one .intro element taking up space within it.
You can fix this by stopping the background from repeating, and making the body the full height of the window at minimum, like so:
body {
min-height: 100vh;
background-repeat: no-repeat;
}
Edit: technically the 'no-repeat' is redundant when using a gradient background, as it will always fill the height provided the height is at or above 100vh.
However I would leave it there anyway as good practice just in case the background ever changes to an image; or for edge cases where the min-height may get overridden.
This question already has answers here:
Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
(2 answers)
How can I make a gradient flow in multiple directions?
(3 answers)
Closed 11 months ago.
Specifically, the pixels are linearly getting more red in the x direction, and more blue in the y direction. The bottom left corner is black (0, 0, 0), top right is magenta (255, 0, 255) and other two corners are pure blue and pure red. So this gradient contains every possible colour you can make using just blue and red.
I have searched around quite a bit to see if this is possible but couldn't find anything conclusive either way.
Something like the following is close, but doesn't work as I need this to actually be all the proper colours and not this duller version. My current solution is using processing.js but that seems a bit overkill for something so simple.
.grad {
height: 256px;
width: 256px;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,255,0.5) 100%),
linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,0,0,0.5) 100%);
}
<div class="grad"></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 1 year ago.
Improve this question
I want to create a slope shape on top of my div. The solution consists of main div (with content) and top tiv (triangle shape). For top div i have specified a correct background, clip-path property, and percentual padding top (for fixed ratio on diferent widths). Problem is percentual padding when resulting height of shape in pixel has decimals. The shape has extra white space on bottom. How to eliminate/fill this white space ?
triangle div css props
background: gray;
clip-path: polygon(0 0, 100% 100%, 0 100%);
padding-top: 15%;
margin-bottom: 0;
I am not looking for workarounds. I want to keep both elements and specifying clip-path on rectangle element wont work for me. I am looking for answers how to round the final height after percentage calculation.
reproduction https://jsfiddle.net/vt5pr6a1/6/
Resize result to see problem
Make it only one element
.footer {
background: gray;
/* v-- added an extra point using 15%xsreen width */
clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%);
padding-top: 15%;
margin-bottom: 0;
}
body {
margin:0;
}
<div class="footer">
foter content<br>
here
</div>
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 3 years ago.
I am certainly new to Web design.
As seen in this picture, most of the websites I see have this kind of mask over images, and then text over that mask.
So how do I achieve that if I don't edit the picture that way, and want to add the mask over it.
I am using a Bootstrap Jumbotron for the header part of website, with container-fluid property and it's height set at 100vh.
I use an image as background image to the jumbotron. It's really a common thing and can be seen in many websites. For example:
So how do I add a mask or an overlay to the background image, certainly a black tint, so that I can make white text visible.
P.S.
I am very new to css, and I came to know about these mask and overlay properties today itself.
You could nest two blocks together, one with the background image, and the other with the overlay :
.background{
width: 500px;
height: 500px;
background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
background-size: cover;
}
.overlay{
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="background">
<div class="overlay">
<!-- Content here -->
</div>
</div>
The opacity of the overlay can be modified with the last argument of the rgba() function.
Try to use linear gradient:
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");
For more info check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
This question already has answers here:
Div with rounded border
(3 answers)
Closed 4 years ago.
consider blue section as a container like div. I want to have this with rounded corners like the sample. I used border-radius property but couldn't create the same. Also I searched a lot and couldn't fine anything like this.
p.s. I know clip-path property is a good option for this but I want something with more support on browsers.
Use border-radius on the bottom corners;
div {
width: 100%;
height: 250px;
border-radius: 0 0 50% 50%; /* topleft topright bottomright bottomleft */
background: #f90;
}
<div></div>