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>