How to make a triangular top/bottom of section?

Question

I want to make a triangular shape on bottom of section. But it is not responsive way... when I resize a window, space between :before and :after is bigger and bigger.

How to make it with another way ?

JSFIDDLE DEMO:http://jsfiddle.net/0y4L7hxh

<section id="s1">
     <h1>Hello World !</h1>
</section>
<section id="s2">
     <h1>Hello Dominik !</h1>
</section>

#s1 {
    background-color: green;
    padding: 160px 0px;
}
#s2 {
    background-color: #330099;
    padding: 160px 0px;
}
#s1:before {
    position: absolute;
    content:"";
    bottom: 40px;
    width: 51%;
    height: 150px;
    left: 0;
    background-color: green;
    transform: rotate(8deg);
    z-index: 9999;
}
#s1:after {
    position: absolute;
    content:"";
    bottom: 40px;
    width: 51%;
    height: 150px;
    right: 0px;
    background-color: green;
    transform: rotate(-8deg);
    z-index: 9999;
}

that doesn't really look like a triangle to me. is this more of what you had in mind? http://jsfiddle.net/xEGM4/427/ — cocoa, Nov 17 '15 at 20:26

score 0 · Answer 1 · answered Nov 17 '15 at 20:26

0

you could use gradient background and background-size:

section {
  background-color: yellow;
  margin: 0;
  padding: 2.5% 1em 0.01em;/* do not forget to give some top padding to free room for text/triangle */
}

section:after {
  content: '';
  padding-top: 5%;/* this means 5% of parent's width, tune this to your needs */
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom left, yellow 49%, transparent 51%) 0 0 no-repeat, linear-gradient(to bottom right, yellow 49%, transparent 51%) 100% 0 no-repeat;
  background-size: 50% 50%;
}

section:nth-child(even) {
  background: purple;
}

section:nth-child(even):after {
  background: linear-gradient(to bottom left, purple 49%, transparent 51%) 0 0 no-repeat, linear-gradient(to bottom right, purple 49%, transparent 51%) 100% 0 no-repeat;
  background-size: 50% 50%;
}

<section
  <h1>Hello World !</h1>
  <h1>Hello World !</h1>
  <h1>Hello World !</h1>
  <h1>Hello World !</h1>
</section>

<section>
  <h1>Hello Dominik !</h1>
  <h1>Hello Dominik !</h1>
  <h1>Hello Dominik !</h1>
  <h1>Hello Dominik !</h1>
  <h1>Hello Dominik !</h1>
</section>
<section>
  <h1>Hello World !</h1>
</section>

<section>
  <h1>Hello Dominik !</h1>
</section>

here a code pen with differents colors from background and flat triangle http://codepen.io/anon/pen/yYwLeR play with it and tune padding-top values to resize it taller

answered Nov 17 '15 at 20:26

G-Cyrillus

101,410
14
105
129

Your issue is good but I've two questions: how to make borders more clear? http://prntscr.com/93x2lu 2) How to make a triangular for this image? http://prntscr.com/93x3dc – user3313798 Nov 17 '15 at 21:04
@user3313798 1) set the 2 gradient colors at different but close values to blur the edges, but do 2 first :) 2) increase padding-tops to go to a less flat triangle as written . code pen stands there to play with it live and help you understand how this works – G-Cyrillus Nov 17 '15 at 21:09
hmm but this purple section must be purple. and i include to top this white gradient. What should I change ? – user3313798 Nov 17 '15 at 21:16
@user3313798 here a variation http://codepen.io/anon/pen/EVMxrK, for the colors, search for them in the code and update them to your needs. take your time to be familiar with this piece of code if you like it so it becomes yours ;), if you think the answer usefull you can upvote it too ... just saying – G-Cyrillus Nov 17 '15 at 21:22
Thanks, but it is not ideal :( http://prntscr.com/93xe58 but I know that is one solution.. :( – user3313798 Nov 17 '15 at 21:28
@user3313798 for a fixed width, the classic borders is the one http://codepen.io/anon/pen/VvRYZr – G-Cyrillus Nov 17 '15 at 21:35

score 0 · Answer 2 · answered Nov 17 '15 at 20:32

Maybe instead of using two rectangles you could use two triangles (jsfiddle demo: http://jsfiddle.net/atLuqy7f/ )

#s1{
  background-color: green;
  padding: 160px 0px;
  position:relative;
}

#s1:before{
  position: absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  content: "";
  width: 0; 
  height: 0; 
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 40px solid green;
  z-index: 9999;
}

#s1:after{
   position: absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #330099;
  z-index: 9999;
}

And remember to use position property for container of absolute positioning element.

How to make a triangular top/bottom of section?

2 Answers2