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樣式設置箭頭和線段。箭頭高度、線段距離、寬度等屬性可根據實際需要調整。
上一篇css畫梯形里面顯示文字
下一篇css畫圓代碼