我正在嘗試制作一個帶有實心角的網格，而不是它們相遇的三角形。即我希望它看起來像右邊的，而不是左邊的
我還希望能夠將每個邊框指定為一個單獨的類，因為我是動態生成的。目前看起來像這樣：
.left{
border-style: solid;
border-left-color:#AAAAFF;
}
.right{
border-style: solid;
border-right-color:#AAAAFF;
}
.up{
border-style: solid;
border-top-color:#AAAAFF;
}
.down{
border-style: solid;
border-bottom-color:#AAAAFF;
}
<div class="cell left down up">
</div>
<div class="cell up right">
</div>
<div class="cell left up">
</div>
....
我在網上找到的兩個選項是使用陰影
uj5u.com熱心網友回復：
您可以使用 CSS 變數來設定各個邊的顏色。
這是一個簡化的示例。每個單元格元素都有一個由四個線性漸變組成的背景影像。'border' 的顏色設定為透明，除非在設定為白色時添加相關類。
body {
background: black;
}
.cell {
--top: transparent;
--bottom: transparent;
--left: transparent;
--right: transparent;
width: 10vmin;
height: 10vmin;
background-image: linear-gradient(var(--top) 0 2px, transparent 2px 100%),
linear-gradient(to top, var(--bottom) 0 2px, transparent 2px 100%),
linear-gradient(to right, var(--left) 0 2px, transparent 2px 100%),
linear-gradient(to left, var(--right) 0 2px, transparent 2px 100%);
}
.top {
--top: white;
}
.bottom {
--bottom: white;
}
.left {
--left: white;
}
.right {
--right: white;
}<body>
<div class="cell left right"></div>
<div class="cell left right top"></div>
<div class="cell right bottom"></div>
<div class="cell right"></div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397278.html