CODEWITHSUNDEEP
htmlcss
cxxus
cxxus

Reputation: 21

Triangle at bottom of section

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:

Upvotes: 1

Views: 147

Answers (4)

Temani Afif
Temani Afif

Reputation: 274272

You can consider gradient to create the first element with the arrow then use negative margin to create the overlap of both sections:

.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>

You can add CSS variable to easily control the whole shape:

.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>

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3333

Here is the solution,

You can use this on your 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);

For more shapes , Refer this site, enter link description here

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

You could use SVG as a bottom background with the non-scaling-stroke property set on the path

Then you could apply a gray color using the fill property

    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>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16261

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>

Upvotes: 2

Related Questions