Triangle at bottom of section

Question

I am creating one page website (it's one of my first). My designer created something like that at the bottom of section "1":

I tried do it from Center Triangle at Bottom of Div and edit, but it didnt help me.

//edit: My code is really simple for now, something like:

 <section class="white"></section> <section class="grey"></section> 

It's based on bootstrap, but I tried do it by changing width of triangle (from another problem - link is over), but i need to do it with bottom border.

I dont want to do it by picture, so I have to ask you - how can i do it?

//edit2: I need to do something like that:

Answer 1

Use pseudo element as :before/:after

.sec1{
height:50px;
position:relative;
}
.sec1:before,.sec1:after{
content:'';
height:5px;
background:orange;
width:50.5%;
position:absolute;
top:150px;
}
.sec1:before{
left:0;
transform: rotate(10deg);
}
.sec1:after{
right:0;
transform: rotate(-10deg);
}
.sec2{
height:350px;
}

<section class="sec1"></section> 
<section class="sec2"></section>

Answer 2

您可以使用SVG作为底部背景，并在non-scaling-stroke上设置path属性

然后，您可以使用fill属性应用灰色

    div {
      width: 500px;
      padding-bottom: 50px;
      background-color: #f6f6f6;
      background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 200 15" xmlns="http://www.w3.org/2000/svg"><path d="M -5 0 L100 14 L205 0 L205 20 L-5 20z"  stroke="gold" stroke-width="3" fill="#e8e8e8" vector-effect="non-scaling-stroke"/></svg>');
      background-position: bottom left;
      background-size: 100% auto;
      background-repeat: no-repeat;
    }

<div>
  <p> Hello,<br />
      There is a responsive SVG background here below.
  </p>
</div>

Answer 3

您可以考虑使用渐变创建带有箭头的第一个元素，然后使用负边距创建两个部分的重叠：

.white {
  min-height:100px;
  padding-bottom:40px;
  background:
    linear-gradient(to bottom left,
      #fff calc(50% - 6px),yellow calc(50% - 5px),
      yellow 50%,transparent 51%) -100px 100%/calc(50% + 101px) 40px,
      
    linear-gradient(to bottom right,
      #fff calc(50% - 6px),yellow calc(50% - 5px),
      yellow 50%,transparent 51%) calc(100% + 100px) 100%/calc(50% + 101px) 40px,
      
    linear-gradient(#fff,#fff) top/100% calc(100% - 40px);
  background-repeat:no-repeat;
  position:relative;
}
.grey {
  height:100px;
  background:grey;
  margin-top:-50px;
}
body {
 background:pink;
}

<section class="white"></section>
<section class="grey"></section>

您可以添加CSS变量来轻松控制整个形状：

.white {
  --h:40px; /*height of the triangle*/
  --c:yellow; /*color of the triangle*/
  --b:#fff; /*main background*/
  --t:5px; /*width of the border*/
  --g:var(--b) calc(50% - var(--t) - 1px),var(--c) calc(50% - var(--t)),
      var(--c) 50%,transparent 51%; 
  min-height:100px;
  padding-bottom:var(--h);
  background:
    linear-gradient(to bottom left,var(--g)) 
      -100px 100%/calc(50% + 101px) var(--h),
      
    linear-gradient(to bottom right,var(--g)) 
      calc(100% + 100px) 100%/calc(50% + 101px) var(--h),
      
    linear-gradient(var(--b),var(--b)) top/100% calc(100% - var(--h));
  background-repeat:no-repeat;
  position:relative;
}
.grey {
  height:150px;
  background:grey;
  margin-top:-100px;
}
body {
 background:pink;
}

<section class="white" style="--h:60px;"></section>
<section class="grey"></section> 
<section class="white" style="--h:120px;--c:orange;--b:red;--t:10px"></section>
<section class="grey"></section>
<section class="white" style="--h:100px;--c:#000;--b:#fff;--t:2px"></section>
<section class="grey"></section>

Answer 4

这是解决方案，

您可以在div上使用它，

CSS

-webkit-clip-path: polygon(100% 0, 100% 83%, 51% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 83%, 51% 100%, 0 85%, 0 0);

有关其他形状，请访问此网站， enter link description here