纯css实现角标效果-css属性clip-path

作者:admin 发布时间:2024-02-01 15:40:55 浏览:2446次

最近在做一个项目想要实现以下的角标效果,可以使用css属性clip-path来实现。


具体的代码


.status{
	  			position: absolute;
	  			top: 3px;
	  			right: -10px;
	  			background-color: #e53a40;
	  			color: #ffffff;
				padding: 3rpx 8rpx;
	  			line-height: 20px;
	  			text-align: center;
	  			font-size: 24rpx;
				z-index: 99;
				border-radius: 3px 0 0 3px;
	  }
	  .status::before{
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 8px;
	    right: 0;
	    bottom: -8px;
	    background-color: inherit;
	    filter: brightness(.7);
	    // clip-path: polygon(0 0, 100% 0, 0 100%);
		clip-path: polygon(0 0, 0 100%, 100% 0);
	  }



css属性clip-path的使用说明

clip-path可以理解为一把剪刀,将图片、div等剪裁成我们所希望的形状。下面,将着重介绍下clip-path的三个函数,分别是polygon()、circle()、ellipse()
具体的使用方法可以参考以下这两篇文章
https://blog.csdn.net/weixin_39602178/article/details/134075514


clip-path可视化的工具推荐

https://www.cssportal.com/css-clip-path-generator/

如需转载请保留本文出处: https://www.zhe94.com/962.html

上一篇:懂懂日记:一点委屈
下一篇:uniapp实现父组件调用子组件函数的方法
vs code 的常用快捷键

vs code 的常用快捷键

Visual Studio Code是个一款非常优秀的代码编辑工具,支持多种编程语言的编写。工具很常用,要想用得溜还得记记快捷键,把技巧记下来,编写代码大大提高工作效率,事半功倍。
Mysql关联表查询怎么样才能只取最新一条记录

Mysql关联表查询怎么样才能只取最新一条记录

有时我们使用mysql的时候想要多个表查询数据,但是关联查询的时候有多条记录,我们只想要最新的一条记录怎么办呢?很多人第一时间想到的是使用group by 处理,这是没问题的,但是需要提取做些处理,要是直接查询出来的数据可能并不准确。