CSS实现图片缺角效果

ops/2025/2/25 16:25:27/
htmledit_views">

效果:

源码: 

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>123</title><style>body {margin: 0;padding: 0;background: #f9f9f9;display: flex;align-items: center;justify-content: center;height: 100vh;}.row {display: flex;padding: 30px;gap: 30px;flex-wrap: wrap;background: inherit;}.box {position: relative;width: 500px;height: 250px;border-radius: 20px;background-color: inherit;}.btn {display: inline-flex;padding: 12px 20px;justify-content: center;align-items: center;color: white;text-decoration: none;background-color: #000521;border-radius: 80px;}.btn-decor-wrap {position: absolute;left: 0;bottom: 0;display: inline-block;padding: 24px 24px 0 0;margin: 24px 24px 0 0;border-top-right-radius: 45px;background-color: inherit;}.btn-decor-wrap:after,.btn-decor-wrap:before {z-index: 0;position: absolute;display: block;width: 24px;height: 24px;content: '';clip-path: polygon(0.082%0%, 0%0%, 0%100%, 100%100%, 100%99.918%, 100%99.918%, 84.085%98.066%, 68.994%93.913%, 54.912%87.642%, 42.022%79.44%, 30.51%69.49%, 20.56%57.978%, 12.358%45.088%, 6.088%31.006%, 1.934%15.915%, 0.082%0%);background-color: inherit;overflow: hidden;}.btn-decor-wrap:before {top: -24px;left: 0;}.btn-decor-wrap:after {right: -24px;bottom: 0;}</style>
</head><body><div class="row"><div class="box" style="background-image: url('https://img-home.csdnimg.cn/images/20250224104257.png');background-size: cover;background-position: center;"><span class="btn-decor-wrap"><a href="#" class="btn">了解更多</a></span></div></div>
</body></html>


http://www.ppmy.cn/ops/161241.html

相关文章

电力通信物联网应用,国密网关守护电力数据安全

电力国密网关是用于保护电力调度数据网路由器和电力系统的局域网之间通信安全的电力专用网关机&#xff0c;主要为上下级控制系统之间的广域网通信提供认证与加密服务&#xff0c;实现数据传输的机密性、完整性。 国密算法网关功能特点 身份认证&#xff1a;对接入的设备和用户…

【蓝桥杯单片机】第十三届省赛第二场

一、真题 二、模块构建 1.编写初始化函数(init.c) void Cls_Peripheral(void); 关闭led led对应的锁存器由Y4C控制关闭蜂鸣器和继电器 2.编写LED函数&#xff08;led.c&#xff09; void Led_Disp(unsigned char ucLed); 将ucLed取反的值赋给P0 开启锁存器 关闭锁存…

Maven导入hutool依赖报错-java: 无法访问cn.hutool.core.io.IORuntimeException 解决办法

欢迎大家来到我的博客~欢迎大家对我的博客提出指导&#xff0c;有错误的地方会改进的哦~点击这里了解更多内容 目录 一、报错二、解决办法 一、报错 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId> </de…

Python+Flutter前后端分离开发跨平台待办事项APP实战

以下是一个简单的示例&#xff0c;展示如何使用 Flutter 开发一个待办事项应用&#xff0c;并通过 FastAPI 和 SQLAlchemy 作为后端接口。为了简化代码&#xff0c;所有的 Flutter 前端代码将写在一个 main.dart 文件中。 1. 后端部分&#xff08;FastAPI SQLAlchemy&#xf…

如何实现使用DeepSeek的CV模型对管道内模糊、低光照或水渍干扰的图像进行去噪、超分辨率重建。...

要使用 DeepSeek 的 CV 模型对管道内模糊、低光照或水渍干扰的图像进行去噪、超分辨率重建&#xff0c;一般可以按照以下步骤实现&#xff1a; 1. 准备工作 1.1 获取 API 访问权限 首先&#xff0c;你需要从 DeepSeek 官方获取 API 访问权限和相应的 API 密钥。这通常需要在 De…

es-head(es库-谷歌浏览器插件)

1.下载es-head插件压缩包&#xff0c;并解压缩 2.谷歌浏览器添加插件 3.使用

离子阱量子计算机的原理与应用:开辟量子计算的新天地

离子阱量子计算机的原理与应用:开辟量子计算的新天地 大家好,我是Echo_Wish,今天我们来聊聊一个正在颠覆传统计算机架构的前沿话题——离子阱量子计算机。随着量子计算的研究不断取得进展,它的潜力正在吸引越来越多的关注。而在众多量子计算技术中,离子阱量子计算因其优异…

基于SpringBoot的校园消费点评管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…