Geek Answers Handbook

The center triangle at the bottom of the full width div

After several hours of trying in CSS (sorry, I'm still CSS noob) I ask you for help:
I want the triangle to be the "bottom" of the div, filling the entire width of the screen, no matter what the screen size (100%).
When the window is resized, I just want the triangle to change its width so that it still fills the entire width of the screen (100%), but not the height.
At the moment, everything looks like this (color black triangle for demonstration purposes only), which, judging by the appearance, I want to achieve:

enter image description here

My code is as follows:

.top {
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  border-top: 40px solid black;
  border-left: 950px solid transparent;
  border-right: 950px solid transparent;
  width: 0;
  height: 0;
  top: 107px;
  content: "";
  display: block;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: auto;
}
<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>
Run codeHide result

JSFiddle Code: http://jsfiddle.net/L8372wcs/

My problems:

  • , 100% ( ).
  • , div ( ).
  • , , ( ).

.

+4
6

. http://jsfiddle.net/L8372wcs/1/

CSS ( )

.top {
    ...
    position: relative;
}

.triangle {

    border-top: 40px solid black;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    ...
    bottom: -40px;
}

  • ( div 100%). ( )

  • bottom: -40px; ( ), position: relative;. , ( 40px )

enter image description here

+7

inline svg .

, ​​ 100%, CSS preserveAspectRatio svg attribute,

40 , rezise , CSS preserveAspectRatio.

.top {
    position:relative;
    background-color: green;
    height: 100px;
    width: 100%;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    position:absolute;
    top:100%;
    width:100%;
    height:40px;
}
<div class="top">
    <svg viewbox="0 0 100 10" preserveAspectRatio="none" class="triangle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <polygon points="0 0 100 0 50 10"/>
    </svg>
</div>
<div class="bottom"></div>
Hide result

( , , ...), CSS, SVG. CSS:

.top {
  position: relative;
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 40px;
  fill: gold;
}
<div class="top">
  <svg class="triangle" viewbox="0 0 100 10" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon points="0 0 100 0 50 10" />
  </svg>
</div>
<div class="bottom"></div>
Hide result
+4

vw ( ).

.

+2

, 100% ( ).

, vw , . margin (8px Chrome), calc(50vw - 8px) .

, div ( ).

.triangle .top, position: relative; .top, top: 100% .triangle, .top.

, , ( ).

vw .

.top {
  background-color: green;
  height: 100px;
  position: relative;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  border-left: calc(50vw - 8px) solid transparent;
  border-right: calc(50vw - 8px) solid transparent;
  border-top: 40px solid black;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  width: 0;
}
<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>
Hide result
+2

linear-gradient:

.top {
  background-color: green;
  height: 100px;
  position: relative;
}
.triangle {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  background:
    linear-gradient(to bottom left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%) no-repeat left top / 50% 100%,
    linear-gradient(to bottom right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%) no-repeat right top / 50% 100%;
}
.bottom {
  background-color: red;
  height: 200px;
}
<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>
Hide result

Chrome , , .

+2

?

*{
    padding: 0;
    margin: 0;
}
.top {
    background-color: green;
    height: 100px;
    width: 100%;
    position: relative;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    box-sizing: border-box;
    width: 0; 
    height: 0; 
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    position: absolute;
    top: 100px;
    border-top: 30px solid black;
}
+1

More articles:


All Articles