前端css3实现角标【二维式与立体式角标实现】
剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰
📌博主介绍
💒首页:水香木鱼
🛫专栏:邂逅css
✍简介: 博主姓:陈,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”
📝文章内容
✍ 一、2D角标
<template>
<div class="boxConter">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F03%2F20160303222222_Lhk5G.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656928035&t=1fb572562b4a70b80169b5299ca6571e">
<!--添加角标-->
<div class="AngleOfTheBox">
<span>刘亦菲</span>
</div>
</div>
</template>
<style lang="less" scoped>
.boxConter{
width: 300px;
height: 200px;
background-color: green;
overflow: hidden;
position: relative;
img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 200px;
}
//角标主要样式
.AngleOfTheBox{
position: absolute;
top: -50px;
right: 260px;
background-color: gold;
width: 100px;
height: 100px;
transform: rotate(-50deg);
//文字
span{
position: absolute;
display: inline-block;
color: #fff;
width: 100%;
bottom: 0;
left: 0;
text-align: center;
}
}
}
</style>
✍ 二、立体式角标
<template>
<div>
<div class='cornerMarkBox'>
<!--内容区域-->
<img style="width:auto;height:auto;max-width:100%;max-height: 100%" src="https://preview.qiantucdn.com/58pic/44/05/54/47858PIC4pj2zTn5Dhzr6_PIC2018.png!w1024_new_0">
<img style="width:auto;height:auto;max-width:100%;max-height: 100%" src="https://preview.qiantucdn.com/58pic/44/05/54/47858PIC4pj2zTn5Dhzr6_PIC2018.png!w1024_new_1024">
<!--角标区域-->
<div class='MarkBox'>
<div class='insideBox'>水香木鱼</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
//去除img标签默认的水平和垂直间距
img {vertical-align:bottom}
//大盒子
.cornerMarkBox {
width: 400px;
height: 500px;
position: relative;
background: #1890ff;
overflow: visible;
margin: 20px;
display: inline-block;
}
//角标盒子
.MarkBox {
width: 106px;
height: 108px;
overflow: hidden;
position: absolute;
top: -6px;
left: 297px;
//内侧盒子
.insideBox {
line-height: 18px;
text-align: center;
transform: rotate(45deg);
position: relative;
padding: 8px 0;
left: -8px;
top: 25px;
width: 150px;
background: red;
color: white;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
}
}
.insideBox:before,
.insideBox:after {
content: "";
border-top: 4px solid #4e7c7d;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
bottom: -4px;
}
//左上阴影
.insideBox:before {
left: 0;
}
.insideBox:after {
right: 0;
}
</style>
📢博主致谢
非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了
前端css实现角标效果】
,希望可以帮到大家,谢谢。
如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧!点击
【关注+点赞+收藏+评论+转发
】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕