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

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

最近在做一个项目想要实现以下的角标效果,可以使用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实现父组件调用子组件函数的方法
HTML css 实现各种优惠背景效果

HTML css 实现各种优惠背景效果

用CSS做优惠券背景,优惠券的本质其实是一个短期刺激消费的工具,它与积分刚好构成了日常营销的基本工具。消费者使用优惠券的目的不言而喻,当然是为了省钱。而同时,也为商家做了无形的广告。