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>
Related
This question already has answers here:
CSS3 gradient background set on body doesn't stretch but instead repeats?
(13 answers)
Closed 4 years ago.
When using linear-gradient CSS property, the background appears without stripes when using left and right as direction value. But when direction value is given as top or bottom, stripes appears in the background. Is there any way that we can remove the stripes?
Here is the code:
body {
background: linear-gradient(to top, red, yellow);
}
You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.
Your body has a height equal to 0; thus the background won't be visible on it but by default it has 8px of margin which create a height of 8px on the html element.
Why not 16px of height (8px for top + 8px for bottom)?
Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.
Then we have a background propagation from body to html and the linear-gradient will cover the 8px height.
Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px.
body {
background: linear-gradient(to top, red, yellow);
}
It's also repeated when using left or right direction but you won't see it visually which is logical since it's the same pattern:
body {
background: linear-gradient(to right, red, yellow);
}
You can also remove the repeating and you will see it's covering only 8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}
In order to avoid this behavior you can simply set height:100% (or min-height:100%) to the html
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}
It will also work with no-repeat since by default a linear-gradient will cover the whole are:
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
That's because the calculated height of <body> is resulting from the height of its content. When smaller than viewport's height, the background will repeat itself:
body {
background: linear-gradient(to top, red, yellow);
}
To make sure it stretches itself (and the background gradient) across the entire height of the viewport, you need to give <body> a min-height equal with viewport's height (100vw):
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
}
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
margin: 0;
}
As #TemaniAfif pointed out in comments, the technical reason for the above is: there is a difference between the root element, which covers the entire viewport and inherits its background from <body>, and the <body> element, which, as specified, can be smaller than the viewport. As per W3C Recommendation:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
I have a div element I wants to apply border radius of 100px, so that it will be in a circular shape. Unfortunately the border radius is not applying to the div element. The CSS selector looks like this:
.battery-circle {
border: 4px solid;
border-image-slice: 1;
border-radius: 30em;
border-image-source: linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
}
As per W3C spec:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other
effects that clip to the border or padding edge (such as ‘overflow’
other than ‘visible’) also must clip to the curve. The content of
replaced elements is always trimmed to the content edge curve. Also,
the area outside the curve of the border edge does not accept mouse
events on behalf of the element.
So as a work around you could try something like this:
.battery-circle {
border: 4px solid transparent;
border-image-slice: 1;
border-radius: 30em;
background-image: linear-gradient(white, white),
linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="battery-circle">test</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 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
This question already has an answer here:
How to scroll a background image together with text in textarea?
(1 answer)
Closed 8 years ago.
Problem
I have a textarea which uses a linear gradient as its background image. I am trying to emulate a "lined paper" effect. I've set my font-size and line-height to the get the correct spacing between the lines and the text;
however, once I scroll down the textarea, I notice a problem:
Namely, that my background-image does not scroll with the text. I have tried background-attachment: scroll, background-attachment: fixed and background-attachment: local, and none solve my problem.
CSS
textarea {
height: 200px;
font-size: 20px;
line-height: 1;
background-image: repeating-linear-gradient(to bottom,
#fff,
#fff 9.5%,
#000 9.5%,
#000 10%);
}
Fiddle
background-attachment: local actually does work; just not in Firefox, where I was testing.
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 3 years ago.
I know how to create triangles with CSS with borders and using images, but in my case, I'd like to use background color.
I want something like this image.
Can anyone help me?
An alternative is to use background linear gradient.
The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.
In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.
.triangle {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}
<div class="triangle"></div>
Please note that this property is supported only by modern browsers (IE 11+, FF 49+)
The problem with creating triangles using CSS borders is their inflexibility when it comes to styling. As such, you can use a relatively fully pseudo fledged element instead, providing many more styling options:
Sure, you can do, e.g.:
Demo Fiddle
div{
height:50px;
width:50px;
position:relative;
overflow:hidden;
}
div:after{
height:100%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
left:-75%;
background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
background-size:cover;
}
Try this tool to generate the shape you want: https://bennettfeely.com/clippy/. Then tweak the code according to your needs. For example, this is how you can get a triangle:
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Support, however, is not the best as it's only fully supported in Firefox and non-existant in Edge/IE and therefore discouraged to use on production websites Clip path support