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

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

最近在做一个项目想要实现以下的角标效果,可以使用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://zhe94.com/962.html

上一篇:懂懂日记:一点委屈
下一篇:uniapp实现父组件调用子组件函数的方法
kettle怎么设置变量?kettle运用变量的方法

kettle怎么设置变量?kettle运用变量的方法

Kettle 的早期版本中的变量只有系统环境变量,新版本变量一般包括系统环境变量, “Kettle变量” 和内部变量三种系统环境变量的影响范围很广,凡是在一个 JVM下运行的线程都受其影响.
在线免费OCR图片转文字网站Pearocr

在线免费OCR图片转文字网站Pearocr

Pearocr是一个免费好用的在线OCR图片转文字工具,通过浏览器就能实现OCR图片转文字,支持本地图片上传以及通过剪贴板直接上传,目前为止完全免费,没有任何次数限制,可以无限次使用。
CDH集群大致架构流程图

CDH集群大致架构流程图

CDH是由Cloudera进行开发的大数据一站式平台管理解决方案,基于Hadoop生态的第三方发行版,通过基于Web的用户界面,支持大多数Hadoop组件,包括HDFS、MapReduce、Hive、Pig、 Hbase、Zookeeper、Sqoop,简化了大数据平台的安装、使用难度。
Linux下搭建FTP服务器的方法

Linux下搭建FTP服务器的方法

一般在各种linux的发行版中,默认带有的ftp软件是vsftp,从各个linux发行版对vsftp的认可可以看出,vsftp应该是一款不错的ftp软件。