HTML&CSS ：卡片去边角效果
这段代码创建了一个带有装饰性按钮的卡片(图片去边角)，通过 CSS 技术实现了按钮的装饰性效果，为页面添加了视觉吸引力。
演示效果
HTML&CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
font-size: 0;
box-sizing: border-box;
}
body {
background: #8a8;
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: 450px;
height: 260px;
border-radius: 20px;
background-color: inherit;
}
.btn {
display: inline-flex;
padding: 12px 20px;
justify-content: center;
align-items: center;
font-size: 12px;
color: white;
line-height: 18px;
text-decoration: none;
background-color: darkblue;
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 {
display: block;
content: '';
position: absolute;
width: 24px;
height: 24px;
clip-path: polygon(0.082% 0%, 0% 0%, 0% 100%, 100% 100%, 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%);
background-color: inherit;
overflow: hidden;
z-index: 0;
border: none;
}
.btn-decor-wrap:before {
left: 0;
/* 消除可能出现的横条 下移1px */
top: -23px;
}
.btn-decor-wrap:after {
right: -24px;
/* 消除可能出现的横条 下移1px*/
bottom: -1px;
}
</style>
</head>
<body>
<div class="row">
<div class="box" style="background-image: url('https://picsum.photos/450/300');">
<span class="btn-decor-wrap">
<a href="#" class="btn">了解更多</a>
</span>
</div>
</div>
</body>
</html>HTML 结构
- row: 创建一个类名为“row”的 div 元素，用于包含卡片。
- box: 创建一个类名为“box”的 div 元素，用于显示卡片内容。
- btn-decor-wrap: 包含按钮的装饰性元素。
- btn: 创建一个类名为“btn”的链接，用于显示“了解更多”按钮。
CSS 样式
- body: 设置页面的边距、填充、背景色、显示方式和对齐方式。
- row: 设置卡片容器的样式，包括显示方式、内边距、间距和换行。
- box: 设置卡片的样式，包括位置、尺寸、边框半径和背景色。
- btn: 设置按钮的样式，包括内边距、对齐方式、颜色、背景色和圆角。
- btn-decor-wrap: 设置按钮装饰性元素的样式，包括位置、内边距和圆角。
- btn-decor-wrap:after, .btn-decor-wrap:before: 设置按钮装饰性元素的伪元素，用于创建装饰性效果。
- btn-decor-wrap:before: 设置装饰性元素的上左角。
- btn-decor-wrap:after: 设置装饰性元素的下右角。