css——三角标签实现
CSS 实现 标签 三角
2023-09-27 14:29:10 时间
参考:https://blog.csdn.net/whqet/article/details/8881957
效果:
html:
<span class="s-triangle"><i class="triangelTag">9.0折</i></span>
css:
.s-triangle { display: inline-block; font-size:12px; margin-left: 15px; position: relative; } .triangelTag { display: block; background-color: #ffdd00; height: 20px; line-height: 20px; padding: 0 10px 0 12px; position: relative; } .triangelTag:before { content: " "; width: 0px; height: 0px; position: absolute; top: 0; left: -20px; border: 10px solid transparent; border-right-color: #ffdd00; }
相关文章
- vue环境下安装npm,启动npm 修改js,css样式
- Python处理超强反爬(TSec防火墙+CSS图片背景偏移定位)
- 你所不知道的 CSS 动画技巧与细节
- 【Css】带边框的标签及图标标签实现(图文+完整代码)
- 【Css】Css有关html“伪元素”的语法合集(示例)
- 前端面试练习-CSS实现固定宽高的div在不同分辨率屏幕上下左右居中
- CSS简介代码实现表格(table)只有横线没有竖线的效果,一个简约卡片化精美的数据表格(类似Bootstrap表格)
- [转]css实现左侧宽度自适应,右侧固定宽度
- css+js实现兼容性select的样式
- 纯CSS实现垂直居中的几种方法
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 2.3 HTML头部标记head
- Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结
- 使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决
- css层次选择器(详解)
- css实现加入购物车动画(水平抛物线)
- PHP根据传入参数合并多个JS和CSS文件的简单实现
- 浅析现代CSS解决方案:数学函数min、max、clamp、calc及使用vw配合clamp实现响应式布局
- 纯CSS实现小圆点和三角形图案
- css+html+js实现多级下拉和弹出菜单
- JQuery采纳CSS实现DOM显示和隐藏要素
- css图片水平、垂直居中方案
- CSS:实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转
- css img引入的图片宽高固定 不想让图片变形