如何解决如何使用线性渐变创建标志?
div{
height: 500px;
width: 900px;
background-image: linear-gradient(to bottom right,green 33% 66%,yellow 66% 100%,black 111% 222%,yellow 0% 5%,blue 0% 10%);
}
<div></div>
它应该是这样的:
解决方法
用多个背景做,会更容易处理:
.box {
width:300px;
height:200px;
background:
linear-gradient(to bottom right,#21b539 calc(50% - 40px),#f5cf22 0 calc(50% - 30px),#0000 0),linear-gradient(to top left,#00a6e0 calc(50% - 40px),#0000 0)
#000
}
<div class="box">
</div>
试试这个background: linear-gradient( to bottom right,green 33% 40%,yellow 40% 45%,black 45% 55%,yellow 55% 60%,blue 60% 100% );
还要为您的 div 添加高度和宽度
你必须做这样的事情:
background-image: linear-gradient(to bottom right,green 35%,yellow 35% 40%,black 40% 60%,yellow 60% 65%,dodgerblue 65%);
记住渐变是从左上到右下的方向。超过 100 的百分比没有任何意义。
div {
width: 900px;
height: 500px;
background-image: linear-gradient(to bottom right,dodgerblue 65%);
}
<div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。