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>

轉載于:https://www.cnblogs.com/daiwenru/p/7220851.html

總結

以上是生活随笔為你收集整理的css border 制作三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。