I am trying to make the following with CSS
Making a triangle with CSS is straightforward but I don't know how to give it a non-solid background.
Any suggestions?
edit: The background pattern is a PNG image.
-
Or this one stackoverflow.com/questions/10969941/…web-tiki– web-tiki2014-04-23 13:56:00 +00:00Commented Apr 23, 2014 at 13:56
-
Are you trying to make the background yourself WITHOUT the use of an image, with only CSS?Fizor– Fizor2014-04-23 13:57:54 +00:00Commented Apr 23, 2014 at 13:57
-
@itcouldevenbeaboat : Have you succeeded?souslov– souslov2014-04-23 15:31:12 +00:00Commented Apr 23, 2014 at 15:31
-
@Notulysses I actually ended up hacking it with a PNG over top, since that fit the project better. I appreciate your assistance though!Code Whisperer– Code Whisperer2014-04-23 16:47:47 +00:00Commented Apr 23, 2014 at 16:47
Add a comment
|
1 Answer
.triangle {
width: 160px;
height: 160px;
position: absolute;
top: 30%;
left: 45%;
clip: rect(auto, 180px, auto, 100px);
transform: rotate(-90deg);
}
.triangle::after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1)));
transform: rotate(-45deg);
}
If you want to use png image for your background then you should change this property to :
background:url('my_url_to_the_image');
4 Comments
King King
The only issue with this solution is the vertical scrollbar will appear before the actual bottom edge of the triangle reaches the bottom edge of the viewport. It is because the
clip just clips the div visually without actually eliminating the space of the clipped half.
souslov
@King King : Is it better that way ?
King King
yes, only
overflow:hidden can actually clip an element, in fact there is a solution using only overflow:hidden without bothering with clip, web-tiki also posted this stackoverflow.com/questions/10969941/… as a comment under the OP's question.King King
And I also made this jsfiddle.net/viphalongpro/frWnj/2 right after you posted your answer (so I decided not to post it as an answer).