文章详情页

css3 - css小三角定位

浏览：193日期：2023-06-27 10:19:10

问题描述

css3 - css小三角定位

.triangle-down { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;}

怎么把小三角的位置调整到文字后面

问题解答

回答1：

<html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>p:after { content: ''; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;} </style></head><body><p>文字</p></body></html>回答2：

用伪元素:after

<p>文字</p>p:after { content: ''; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;}回答3：

position:absolute;right:0; top:0;文字元素的样式记得加position：relative

CSS

上一条：css - 移动端左右滑动下一条：css - flexbox 布局設定 margin的問題

相关文章：

1. python - win7 64位，安装urllib老是报错？2. html - 请问这是为何3. docker-machine添加一个已有的docker主机问题4. 关于docker下的nginx压力测试5. 怎样在java中查询mysql得到如下的json格式的结果？6. javascript - js 多维数组的问题7. javascript - nginx 反向代理 js跨域问题？8. Vue项目打包后发布到github pages上，如何访问？9. javascript - 请问一下vue当中三级路由能否使用二级路由的的router-view?10. 文本处理 - 求教使用python库提取pdf的方法？