This question already has answers here:
Create a responsive receipt cutoff in css
(1 answer)
Making jagged triangle border in CSS
(5 answers)
Closed 24 days ago.
I am trying to create in CSS a border pattern to apply on the top and bottom of my content. It should look like this (the teeth should be black):
+--------------------+
|\/\/\/\/\/\/\/\/\/\/|
| |
| the actual |
| content |
|/\/\/\/\/\/\/\/\/\/\|
---------------------+
I am trying to make the teeth black and the rest of the border area transparent.
My main idea is to work with background-image and linear-gradient.
I have managed to draw the left half of a black tooth with:
linear-gradient(45deg, white 0 50%, black 50% 100%)
... and the right half with:
linear-gradient(135deg, black 0 50%, white 50% 100%)
The plan is the to put the two halves side-by-side and then simply use background-repeat: repeat-x to paint as many teeth as are necessary for the width. That would allow me to do the top row of the teeth and then I would do the bottom row in a similar manner.
The plan fails because I cannot stack the two parts of the tooth horizontally, side by side.
Online playground is here. Can you help me finish the top row of teeth?
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Needs details or clarity Add details and clarify the problem by editing this post.
This could be extremely easy, but I'm not very familiar with CSS effects, but is it possible to create a background that mimics the gradient of the underlying image?
The background is repeated vertically.
---
The closest I have been able to get is as follows:
body {
background: radial-gradient(ellipse at top right, #0D0934, transparent),
radial-gradient(ellipse at top left, #3A0927, transparent),
radial-gradient(ellipse at bottom left, #0D0934, transparent),
radial-gradient(ellipse at bottom right, #3A0927, transparent);
}
P.S. The visualization seems buggy in this code snippet
body{ background: radial-gradient(red, blue); }
This question already has an answer here:
Footer consisting of two right triangles
(1 answer)
Closed 1 year ago.
I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated!
Thanks!
I attempted something like this:
background: linear-gradient(120deg, #ba5459 48%, #97444c 48%);
Its not overlapping triangles its a special CSS property called clip-path which is used to clip the rectangular div into various shapes.
Create a div first and then in CSS paste the following property. Play with the values to understand its behavior.
clip-path: polygon(0 24%, 100% 0%, 100% 99%, 0% 100%);
You can learn more about clip path over there.
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
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 7 years ago.
Improve this question
I need to create two divs like in image. both can have background images. Any one can help?
Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png
There are several ways to do this.
Old School
One way would be to crop the overlaid image so that it has a triangle cut off and replaced by transparency. This would work in any browser that supported .pngs, however, the downside would be that for each image you'd need to create a new crop. A photo-shop batch process or server side image processing job on upload would cover this best, depending on whether you have full control over the images (photoshop) or are dealing with user uploaded images (server side processing)
Masking
By using css masks you could create a mask for the overlaying div that forced transparency through the overlaying div to the div beneath it. You'd want an image where the triangle cut-out is black and the rest transparent. The black area is the area that is retained, while the rest of the div is transparent, revealing the div underneath.
This answer here gives a working example, though the shape is different.
The syntax is pretty simple, you just define a -mask-image with a url that works like a background image. Prefixes are required and support is still a bit limited.
Clip Path
Clip path allows you to clip the overlaying div to let a div underneath show through. You can use this tool to set it up. I've nicked the following css from their output that defines a triangle on the bottom:
-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
In this example, the overlaying div is clipped to the triangle shape allowing the white background to show through. Again, support is limited.
More about clip-path and masking.
With all examples
It's possible with all examples to swap the overlaying div to be the triangle or the square with a corner cut off. It makes no difference to the result.
Also, in all cases you'd need to use position to overlay the two divs on top of each other exactly. Like this:
.container {
position: relative;
}
.div1,
.div2 {
position: absolute;
}
I'm trying to frame my web page, and I want divs with just the corners defined. Essentially, I want the top-right and bottom-left corner to have gradient borders. I hope my "ASCII art" makes sense to you.
- - - - - - - ----.
|
|
'
|
'
'
'
I want the corresponding effect for the bottom-left corner as well.
My incorrect code thus far does not give the desired effect:
-webkit-border-image:
-webkit-gradient(linear, 0 0, 100% 0, from(#666), to(#fff)) 1 100%;
As far as I can tell, you'd like a gradient from top right to bottom left, only showing on the border. As far as I know, you'd either need to create a background image for the whole thing, or at least for the border. Also, only two of five major browsers support gradients like that. Sorry I couldn't offer more help.