如何创建一个向下连接到容器的带有箭头的渐变CSS [英] How to create a gradient css with an arrow down connected to a container
本文介绍了如何创建一个向下连接到容器的带有箭头的渐变CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在带有某些渐变颜色的v容器下放置一个三角形/箭头,但我不知道如何合并"渐变.
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.
如果我使用CSS创建箭头,则渐变将不匹配.
If I create the arrow with CSS the gradient won't match.
关于如何实现这一目标的任何想法?
Any ideas about how to achieve this?
这是代码:
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;
}
推荐答案
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>
这篇关于如何创建一个向下连接到容器的带有箭头的渐变CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文