CSS特效第一弹：右上角tag标志纯代码前端实现（非图片）

😎效果：
在这里插入图片描述

🤷‍♂️思路：

分为2个部分：
1.文字方块+右下角折角文字方块用绝对定位+z-index让文字方块悬浮在右上角的位置
2.右下角折角通过before伪元素+border属性实现(三角形实现方法）

👍核心代码：

<style>.tag {position: absolute;top: 0;left: 400px;transform: translateY(-40%);background-color: #FF5F5F;border-radius: 4px 4px 0px 4px;padding: 0.5rem 1rem;color: #ffffff;font-weight: 700;z-index: 1;}.tag::before {position: absolute;bottom: 0;right: 0;content: '';border-style: solid;border-width: 10px 10px 0 0; /* 实现倒三角的半边 */border-color: #BA3434 transparent transparent transparent;transform: translateY(100%);}</style>

🎁完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.position-relative {position: relative;top: 20px;}.tag {position: absolute;top: 0;left: 400px;transform: translateY(-40%);background-color: #FF5F5F;border-radius: 4px 4px 0px 4px;padding: 0.5rem 1rem;color: #ffffff;font-weight: 700;z-index: 1;}.tag::before {position: absolute;bottom: 0;right: 0;content: '';border-style: solid;border-width: 10px 10px 0 0;/* 实现倒三角的半边 */border-color: #BA3434 transparent transparent transparent;transform: translateY(100%);}</style>
</head><body><div class="position-relative"><div class="tag">Tag</div><img src="https://picsum.photos/450/250" alt="image"></div>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/187957.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！