欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS畫帶線箭頭

錢浩然2年前11瀏覽0評論

CSS畫帶線箭頭可用于網站頁面設計、PPT演示等場合,增加視覺效果。以下是實現方法:

.arrow {
position: relative;
display: inline-block;
}
.arrow:after, .arrow:before {
content:"";
position: absolute;
border-style: solid;
height: 0;
width: 0;
}
.arrow:before {
top: 9px; /*箭頭高度*/
left: -11px; /*箭頭距離*/
border-color: transparent #000000 transparent transparent;
border-width: 10px 10px 10px 0;
}
.arrow:after {
top: 0px; /*線段距離*/
left: 0px; /*線段寬度*/
border-color: transparent #000000 transparent transparent;
border-width: 10px 10px 10px 0;
height: 8px; /*線段高度*/
width: 1px; /*線段寬度*/
margin-left: -12px; /*線段和箭頭距離*/
}

其中,.arrow為箭頭容器,通過設置position: relative;使箭頭與線段在同一容器內。通過:before和:after偽元素的border樣式設置箭頭和線段。箭頭高度、線段距離、寬度等屬性可根據實際需要調整。