问题描述
我正在努力实现这一目标
但到目前为止我设法做到了
我无法将转换后的正方形定位到左侧,并且我不知道如何创建外边框。
我想给它加一个边距,但没有用。
:root {
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
.ts-divider {
position: absolute;
z-index: 1;
width: 21px;
height: 21px;
transform: translateY(100%);
color: var(--primary);
}
.ts-divider:after {
content: '';
position: absolute;
z-index: 1;
width: 100px;
height: 1px;
top: 10px;
background-color: currentColor;
opacity: .6;
}
.ts-divider span:before {
width: 70.75%;
height: 70.75%;
left: 3px;
top: 3px;
border: 1px solid var(--darker);
}
.ts-divider span::after {
width: 41%;
height: 41%;
left: 6px;
top: 6px;
background-color: var(--darker);
content: '';
position: absolute;
z-index: 1;
transform: rotate3d(0,1,45deg);
border: 1px solid var(--primary);
}
<span class="ts-divider">
<span></span>
</span>
解决方法
您可以利用 box-shadow
属性来设置多个边框。您还可以删除 :after
伪元素上的 z-index。我已经通过评论强调了这些变化。
:root {
--primary: #7a6450;
--accent: #effaff;
--dark: #7a6450;
--darker: #7a6450;
}
body {
background: #0e1317;
display: flex;
justify-content: center;
}
.ts-divider {
position: absolute;
z-index: 1;
width: 63px;
height: 63px;
transform: translateY(100%);
color: var(--primary);
}
.ts-divider:after {
content: '';
position: absolute;
/* z-index: 1; Removed */
width: 100px;
height: 5px;
top: 17.5px; /* Manual adjustment according to your code */
background-color: currentColor;
opacity: .6;
}
.ts-divider span:before {
width: 70.75%;
height: 70.75%;
left: 3px;
top: 3px;
border: 1px solid var(--darker);
}
.ts-divider span::after {
width: 41%;
height: 41%;
left: 6px;
top: 6px;
background-color: var(--darker);
content: '';
position: absolute;
z-index: 1;
transform: rotate3d(0,1,45deg);
border: 1px solid var(--primary);
box-shadow: 0 0 0 5px #0e1317,0 0 0px 10px var(--darker); /* First box-shdoaw with the background color and second one with the box color. 5 and 10 are values of their spread radius so you can make use of the offset using that. */
}
<span class="ts-divider">
<span></span>
</span>
我将尝试使用带有背景和边框颜色的单个元素:
:root {
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
--line-length: 200px;
--box-size: 40px;
--inner-box-size: 24px;
--spacing: calc( var(--box-size) - var(--inner-box-size));
--offset: calc( var(--spacing) / 2);
box-sizing: border-box;
}
.ts-divider {
position: relative;
width: var(--line-length);
height: var(--box-size);
border-bottom: 1px solid var(--primary);
}
.ts-divider::before {
content: '';
display: block;
width: var(--box-size);
height: var(--box-size);
position: absolute;
top: 50%;
left: 0;
border: 1px solid var(--primary);
background-color: var(--dark);
transform: rotate(45deg);
}
.ts-divider::after {
--top-offset: calc(50% + var(--offset));
content: '';
display: block;
width: var(--inner-box-size);
height: var(--inner-box-size);
position: absolute;
top: var(--top-offset);
left: var(--offset);
background-color: var(--primary);
transform: rotate(45deg);
}
<div class="ts-divider"></div>