在CSS中,可以使用僞元素 ::before 或 ::after 結合 border 屬性來創建箭頭。以下是一個簡單的示例代碼:
```html
<div class="arrow"></div>
```
```css
.arrow {
position: relative;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
}
.arrow::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
}
```
在這個示例中,我們定義了一個 `div` 元素並應用了 `arrow` 類。然後我們在 `arrow` 類中設置 `border` 屬性,將 `top` 和 `bottom` 的箭頭部分設爲透明,將 `right` 的箭頭部分設爲黑色。接着,我們使用 `::before` 僞元素來創建一個相同的箭頭,並將其設置在原始箭頭的左上角,從而產生箭頭的完整形狀。可以通過調整 `width`、`height` 和 `border` 屬性來自定義箭頭的大小和樣式。
例子
<template lang="pug"> .gongneng-list-container .card.left .item span.icon b-icon(type="v4-shangpin" size="18") span.name 商品管理 .item span.icon b-icon(type="yonghu-kehu" size="18") span.name 客戶管理 .item span.icon b-icon(type="xitongguanli" size="18") span.name 系統設置 .line-box .lineA .lineB .lineC .arrow.top .arrow.bottom .card.middle .item(style="padding: 40px 20px;") span.icon b-icon(type="v4-piaowujiancha" size="18") span.name 發票填開 .item span.icon b-icon(type="v4-saoma" size="18") span.name 掃碼開票 .line-box.to3 .lineA .lineB .lineC .arrow.top .arrow.center .arrow.bottom .card.right .item span.icon b-icon(type="v4-menpiao1" size="18") span.name 發票衝紅 .item span.icon b-icon(type="v4-sousuo" size="18") span.name 發票查詢 .item span.icon b-icon(type="v4-shujutoushibiao" size="18") span.name 發票統計 </template> <script> export default { } </script> <style lang="scss" scoped> .gongneng-list-container { display: flex; .line-box { color: #BDD7FF; display: flex; align-items: center; margin-left: 10px; margin-right: 20px; .arrow { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid; &.top { position: absolute; top: -5px; right: -5px; } &.center { position: absolute; top: calc(50% - 5px); right: -5px; } &.bottom { position: absolute; bottom: -5px; right: -5px; } } &.to3 { .lineA { width: 24px; height: 136px; } .lineB { width: 113px; margin-left: -0; margin-right: -24px; } .lineC { width: 24px; height: 220px; } } .lineA { width: 24px; height: 220px; border: 1px solid; border-left: none; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .lineB { width: 113px; margin-left: -24px; border-top: 1px solid; } .lineC { width: 24px; height: 136px; border: 1px solid; border-right: none; border-top-left-radius: 8px; border-bottom-left-radius: 8px; position: relative; } } .card { // border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: space-between; &.middle { justify-content: space-evenly; } .item { // height: 112px; background-color: #E6EBF3; border-radius: 8px; padding: 20px; span.icon { background-color: #367EE8; display: inline-block; width: 40px; height: 40px; border-radius: 4px; color: white; line-height: 40px; text-align: center; } span.name { margin-left: 10px; } } } } </style>
實現效果: