linear-gradient和border:

Document

.box {

position: relative;

padding: 10px; /* 重要 防止內容被覆蓋 */

text-align: center;

border: 1px solid #f60;

border-radius: 5px;

}

.box::after {

content: '';

position: absolute;

left: 50%;

display: table;

width: 10px;

height: 10px;

margin-left: -5px;

transform: rotate(-135deg); /* 旋轉矩形*/

z-index: 1; /* 覆蓋在上面 */

bottom: -6px;

border-top: 1px solid #f60;

border-left: 1px solid #f60;

/* 角度：從右下角開始。 起始透明，漸變終點7px，結束顏色白色，結束終點0 */

background: linear-gradient(-45deg, transparent 7px, #fff 0);

/* background: linear-gradient(-45deg, red 7px, #fff 0); */

}

this is content.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

總結

以上是生活随笔為你收集整理的三角形描边css,[CSS] tips带有描边的小箭头的全部內容，希望文章能夠幫你解決所遇到的問題。

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