css画一个推荐图标

最新推荐文章于 2024-10-01 23:20:42 发布

经年未远

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_42628504/article/details/118147551

版权

这篇博客展示了如何利用CSS创建一个带有三角形箭头的标签。通过设置不同的边框宽度和颜色，实现了三角形效果，并将其与文本内容结合，创建了一个常见的页面元素。这种方法简单且易于理解，适用于前端开发中的各种布局需求。

摘要由CSDN通过智能技术生成

有很多网站上都有出现这样的图标，今天用css就画一个叭
在这里插入图片描述




-----------------------------css部分--------------------------------
<style>
 .common-label{
    position: absolute;
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background-color: #db4659;
    top: 5px;
    left: 10px;
    z-index: 145;
}

 .common-label .triangle {
    position: absolute;
    top: 24px;
    left: -10px;
    width: 0;
    height: 0;
    z-index: 33;
    border-left: 10px solid transparent;
    border-right: 10px solid #df0d3a;
    border-bottom: 7px solid transparent;
    line-height: 24px;
    text-align: center;
    color: #fff;
}
</style>

---------------------------html部分---------------------------------
 <div style="width: 400px;height: 400px;;margin:100px auto;background-color: pink;">
         <p class="common-label">
            <span class="triangle">值</span>
        </p>
    </div>