1

I am trying to make the following with CSS

enter image description here

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.

Harry
  • 87,580
  • 25
  • 202
  • 214
Code Whisperer
  • 22,959
  • 20
  • 67
  • 85

1 Answers1

3
.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);
 }

Example with gradient

If you want to use png image for your background then you should change this property to :

background:url('my_url_to_the_image');

Example with PNG

potashin
  • 44,205
  • 11
  • 83
  • 107
  • 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. – King King Apr 23 '14 at 14:13
  • @King King : [Is it better that way](http://codepen.io/anon/pen/zskcL) ? – potashin Apr 23 '14 at 14:42
  • 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 http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image?rq=1 as a comment under the OP's question. – King King Apr 23 '14 at 14:43
  • 1
    And I also made this http://jsfiddle.net/viphalongpro/frWnj/2/ right after you posted your answer (so I decided not to post it as an answer). – King King Apr 23 '14 at 14:45