Question

我正在尝试在带有某些渐变颜色的v容器下放置一个三角形/箭头，但我不知道如何“合并”渐变。

如果我使用CSS创建箭头，则渐变将不匹配。

关于如何实现这一目标的任何想法？

代码如下：

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;
}

Answer 1

您可以使用css剪切路径，但是browser support并不是那么好。

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

Answer 2

这里是比剪切路径更受支持但又不透明的另一个想法。

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

如何使用连接到容器的向下箭头创建渐变CSS

2 个答案: