您的位置：首頁技術文章
文章詳情頁

css3 - css小三角定位

瀏覽：81日期：2023-06-27 10:19:10

問題描述

<p>文字<span class='triangle-down'></span></p>

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
相關文章：
国产综合久久一区二区三区