There are many questions here about one triangle as bottom border, but I want to have many triangles at the bottom like in the picture below. How can it be done?
Asked
Active
Viewed 84 times
0
-
1Well that may be an image, not CSS. – Torjescu Sergiu Aug 28 '18 at 08:18
-
2You can use a small triangle as a background-image and repeat it throughout your container. – Torjescu Sergiu Aug 28 '18 at 08:19
-
@TorjescuSergiu I checked the source of this site, there is no image there – jakub1998 Aug 28 '18 at 08:21
-
@jakub1998 what is the site URL? I'm curious, the only way i knew is using small image as a background. – Ivan Vilanculo Aug 28 '18 at 08:23
-
tell us the website link – Torjescu Sergiu Aug 28 '18 at 08:24
-
Oh, I'm sorry, there is an image of a few triangles, it was so nested that I didn't notice. – jakub1998 Aug 28 '18 at 08:29
-
@IvanVilanculo we can do it without image, linear-gradient will do it. check the duplicate – Temani Afif Aug 28 '18 at 08:43
2 Answers
0
Look into ths CSS property. It allows to use images as borders
border-image: url('link-to-your-image.png') <spacing>;
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Eriks Klotins
- 4,042
- 1
- 12
- 26
-1
I think it's an image. You can take this image and create ::before and ::after for the section you want to make a border, and set the upper triangles as a background of ::before and the lower triangles as a background of ::after and set position absolute for both before and after. Put ::before at the top to be the top border and ::after at the bottom to be the bottom border.
Mohammed Ahmed
- 435
- 2
- 11