css 在div左上角添加类似书签的标记

效果图

html

 <view class="mark corner-o" >半导体</view>

CSS

.mark {float: left;margin: 0 6rpx;position: relative;padding: 0;width: 24px;color: #fff;writing-mode: sideways-rl;text-align: center;}.mark::after {position: absolute;content: "";left: 0;top: 100%;border-style: solid;border-width: 0 12px 12px 12px;}.mark.corner-o {background: #ffaa00;}.mark.corner-o::after {border-color: #ffaa00 #ffaa00 transparent #ffaa00;}

css 在div左上角添加类似书签的标记相关推荐

纯css在div上添加小三角
纯css在div上添加小三角有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
纯CSS在div上面添加小三角
用伪类和border可以来画这个小三角 .box {//首先准备一个divheight:100px;width:100px;background: white;position: relative; ...
css在div块添加背景图片为何不显示呢？
1,css没有被调用2,css图片地址不对3,div的高度没有固定,是auto或者没有设值4,div被嵌套,5,div代码不规范 login.html文件 <div class="he ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
使用css给div添加四角边框的方法
使用css给div添加四角边框的方法 div添加四角边框,一般写法,我们会在四角分别放一个小方块设置边框,来实现效果,但当我们使用vue,或者需要封装称组件时,例如大屏的展示,如果将边框也封单独的组件 ...
css给div添加阴影
css给div添加阴影 <style type="text/css"> .mydiv{width:250px; height:auto;border:#909090 1 ...
用CSS使DIV水平居中
一,用CSS使DIV层水平居中对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看 ...
Web前端：实现在一块区域（div）点击链接，在同一页面的指定区域显示链接的内容——基于css与div结合网页布局设计
1:效果: 初始: 点击首页: 点击个人主页 : 点击其他类似: 2:代码 (这里我只提供css文件和核心代码,链接内容不提供) 核心代码 <!DOCTYPE html> <html ...
如何添加PDF书签？学会这三种方法
随着PDF文档和书籍已经成为我们工作和生活中不可或缺的一部分,许多PDF书签制作器和编辑器应运而生.了解使用 Windows.Mac 兼容或在线软件免费将书签添加到 PDF的多种方法. 什么是 PDF ...

css 在div左上角添加类似书签的标记

效果图

html

CSS

css 在div左上角添加类似书签的标记相关推荐

最新文章

热门文章