How to create a gradient css with an arrow down connected to a container

Question

I'm trying to put an triangle/arrow under the v-container with some gradient colour but I don't know how to "merge" the gradient.

If I create the arrow with CSS the gradient won't match.

Any ideas about how to achieve this?

Here is the code:

HTML:

<div id="app">
  <v-container fluid pa-0 class="gradient white--text">
    <v-layout row wrap text-xs-center>
      <v-flex xs12>
        <h1 class="display-1 my-5">Lorem Ipsum</h1>
      </v-flex>
    </v-layout>
  </v-container>
  <div class="bottom-arrow"></div>
</div>

CSS:

.gradient{
  height: 300px;
  background: rgb(0,105,173);
  background: linear-gradient(45deg, rgba(0,105,173,1) 0%, rgba(34,84,132,1) 100%);
}
.bottom-arrow:after {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 50px solid rgb(0,105,173);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

Possible duplicate of [CSS? How is this arrow made?](https://stackoverflow.com/questions/28258275/css-how-is-this-arrow-made) — Persijn, May 22 '19 at 10:47
No. That approach doesn't work if you want to apply a gradient background. — Fabio Zanchi, May 22 '19 at 23:14

Ali Mousavi · Accepted Answer · 2019-05-22T05:38:47.403

1

You can use css clip-path, but the browser support is not that great.

.gradient{
  height: 300px;
  background: rgb(0,105,173);
  background: linear-gradient(45deg, rgba(0,105,173,1) 0%, rgba(34,84,132,1) 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* Clip-path */
  /* clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), 60% calc(100% - 30px), 50% 100%, 40% calc(100% - 30px), 0% calc(100% - 30px));
  padding-bottom: 30px; */
  /* Fixed-width arrow */
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), calc(50% + 40px) calc(100% - 30px), 50% 100%, calc(50% - 40px) calc(100% - 30px), 0% calc(100% - 30px));
}

<div id="app" class="gradient">
  <h1 class="display-1 my-5">Lorem Ipsum</h1>
</div>

edited May 22 '19 at 05:38

answered May 22 '19 at 05:10

Ali Mousavi

154
10

Thanks but it's not a good option. Not only because the browser support is not that great but because the width of the arrow is not fixed in this way so in bigger screens it looks just weird. – Fabio Zanchi May 22 '19 at 05:19
1

You can fixate width of the arrow using calc: `clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), calc(50% + 40px) calc(100% - 30px), 50% 100%, calc(50% - 40px) calc(100% - 30px), 0% calc(100% - 30px))` – Ali Mousavi May 22 '19 at 05:37

Temani Afif · Answer 2 · 2019-05-22T10:03:49.400

Here is another idea more supported than clip-path but without transparency.

.gradient{
  height: 250px;
  background: 
    /* 28.3px = cos(45deg) x 40px  
       225deg = 180deg + 45deg
    */
    linear-gradient( 225deg, transparent 28.3px,#fff 29px) bottom left /50% 40px,
    linear-gradient(-225deg, transparent 28.3px,#fff 29px) bottom right/50% 40px,
    
    /*Your gradient*/
    linear-gradient(to bottom right, red,yellow ,blue);
  background-repeat:no-repeat;
}

<div id="app" class="gradient">
</div>

How to create a gradient css with an arrow down connected to a container

2 Answers2