當(dāng)前位置：
首頁 >
css border 制作三角形
發(fā)布時(shí)間：2025/5/22
27
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css border 制作三角形
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
border 邊框 ??
上三角 是只有上面的border 有顏色，其余的邊框都是tranparents,下三角只有下面的border 有顏色,其余的邊框都是tranparents,左三角只有左面的border 有顏色,其余的邊框都是tranparents,右三角只有右面的border 有顏色,其余的邊框都是tranparents,
?
代碼
/***三角***//***外層***/
#imgMouseOver{
position: absolute;
top:48px;
left:-42px;
width:103px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #dfdfdf;
background: #fff;
z-index:999;
box-shadow: 2px 2px 2px #ddd;
padding:4px 2px;
display: none;
}
/***小三角***/
#imgMouseOver .sanjiao{
position: absolute;
top:-20px;
left:50%;
width:0px;
margin-left:-3px;
height:0px;
border-width:10px 6px;
border-style:solid;
border-color:transparent transparent #dfdfdf transparent;}
#showContent{
height:30px;
line-height:30px;
text-align:center;
}
html 代碼 <div id='imgMouseOver'><i class='sanjiao'></i> <p id='showContent'></p></div>
轉(zhuǎn)載于:https://www.cnblogs.com/daiwenru/p/7220851.html
總結(jié)
以上是生活随笔為你收集整理的css border 制作三角形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 读取一个文件，获取其中出现次数最多的前五
- 下一篇： Maven--传递性依赖和依赖范围