css3怎么实现菱形渐变?

css3怎么实现菱形渐变

1、实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:

.diamond{
	width: 200px;
	height: 200px;
	clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
<div class="diamond"></div>

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

(推荐学习:CSS视频教程

2、然后只需要使用linear-gradient属性设置线性渐变背景即可:

.diamond{
	width: 200px;
	height: 200px;
	background-image: linear-gradient(#e66465, #9198e5);
	clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

3、效果图:

Snipaste_2019-12-25_09-52-52.jpg

Image placeholder
前端答疑
未设置
  65人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

qq浏览器不支持css3怎么办?

qq浏览器不支持css3怎么办?css3属性,比如keyframe和animation都需要加webkit、ms前缀,针对手机不同浏览器可能还要加更多前缀。以此达到适配所以浏览器的目的。解决qq浏览器

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览

css3布局方式有几种

css3布局方式有几种css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。下面我们来看看各种布局的效果吧。一、多栏布局——栅格系统栅格系统就是利用浮动实现的多栏布局,在

css3选择器是啥意思

css3选择器是啥意思要明白css3选择器,我们首先需要知道什么是css选择器。css选择器是什么(推荐学习:CSS视频教程)●css选择器是用来规定css样式用于哪一个或哪一些dom元素的一种规范。

css3有内置图标吗?

css3有内置图标吗?css3没有内置图标,所有的图标都需要用户自己下载后使用。但是我们可以通过设置特殊字符,来实现图标的样式。(推荐学习:CSS视频教程)下面是一个特殊字符来代替图标的案例:

CSS3pie是什么?

下面我就讲一讲PIE的具体用法CSS3PIE下载地址:官网http://css3pie.com/download/GitHubhttps://github.com/lojjic/PIE/downloa

css3中过渡和动画的区别是什么?

transition过渡让css变化平滑一些属性:属性描述transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-fun

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显

css3有那些内置函数?

css函数属性函数:attr();背景图片函数:linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradie

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

HDFS3.2升级在滴滴的实践

桔妹导读:Hadoop 3的第一个稳定版本在2017年底就已经发布了,有了很多重大的改进。在HDFS方面,支持了ErasureCoding、Morethan2NameNodes、Router-Base

Fish Redux中的Dispatch是怎么实现的?

前言开源地址:https://github.com/alibaba/fish-redux我们在使用fish-redux构建应用的时候,界面代码(view)和事件的处理逻辑(reducer,effe

揭秘|每秒千万级的实时数据处理是怎么实现的?

01背景闲鱼目前实际生产部署环境越来越复杂,横向依赖各种服务盘宗错节,纵向依赖的运行环境也越来越复杂。当服务出现问题的时候,能否及时在海量的数据中定位到问题根因,成为考验闲鱼服务能力的一个严峻挑战。线

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

如果有人再问你怎么实现分布式延时消息,这篇文章丢给他

1.背景上篇文章介绍了RocketMQ整体架构和原理有兴趣的可以阅读一下,在这篇文章中的延时消息部分,我写道开源版的RocketMQ只提供了18个层级的消息队列延时,这个功能在开源版中显得特别鸡肋,但

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

css能实现自动更换图片吗

css能实现自动更换图片吗css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图

CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想:知乎

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了