如何用 css 创建立方体 window?
How to create cube window with css?
我在网上找到了这张图片,并尝试用 css 创建这些框。我失败了。有谁知道如何解决这个问题?
这是我的代码。左边栏有问题:
.box {
position: relative;
margin: 10px;
display: inline-block;
}
.content {
border-top: 2px solid red;
border-right: 2px solid red;
padding: 5px;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: -10px;
height: 100%;
width: 10px;
background-color: red;
transform: skew(-45deg) rotate(-45deg);
}
.box:after {
content: '';
position: absolute;
bottom: -10px;
left: -5px;
height: 10px;
width: 100%;
background-color: red;
transform: skew(-45deg);
}
<div class="box">
<div class="content">
CONTENT<br />
Some more content
</div>
</div>
border-image
和 linear-gradient
可以做到:
.box {
margin: 10px;
display: inline-block;
border-style:solid;
border-width:2px 2px 15px 15px;
border-image-slice:2 2 15 15; /* same as border-width*/
border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box">
<div class="content">
AA BB
</div>
</div>
使用 CSS 个变量可以更好地控制:
.box {
--b:2; /* border length (without unit!!)*/
--c:15; /* the cube perspective (without unit!!)*/
--g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
border-style:solid;
border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
border-image-slice:var(--b) var(--b) var(--c) var(--c);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box" style="--b:3;--c:10">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box" style="--b:1;--c:20">
<div class="content">
AA BB
</div>
</div>
<div class="box" style="--b:1;--c:5">
<div class="content">
AA BB
</div>
</div>
你也可以把它放在你想要的任何方向:
.box {
--b:2; /* border length (without unit!!)*/
--c:15; /* the cube perspective (without unit!!)*/
--g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
border-style:solid;
}
.bottom-left {
border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
border-image-slice:var(--b) var(--b) var(--c) var(--c);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-right {
border-width:calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) ;
border-image-slice: var(--c) var(--c) var(--b) var(--b);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-left {
border-width:calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) ;
border-image-slice:var(--c) var(--b) var(--b) var(--c);
border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.bottom-right {
border-width:calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) ;
border-image-slice:var(--b) var(--c) var(--c) var(--b);
border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.content {
padding: 5px;
}
<div class="box bottom-left">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box top-right" style="--b:3;--c:10">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box bottom-right" style="--b:1;--c:20">
<div class="content">
AA BB
</div>
</div>
<div class="box top-left" style="--b:1;--c:5">
<div class="content">
AA BB
</div>
</div>
我们还可以通过调整颜色和使用 clip-path
的不同技术来添加更多 3D 效果
.box {
--b:2px; /* border length*/
--c:15px; /* the cube perspective */
--g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
padding:var(--b) var(--b) var(--c) var(--c);
background:
linear-gradient(-45deg,transparent var(--g),#cc0404 0) left /var(--c) 100%,
linear-gradient(135deg,transparent var(--g),red 0) bottom /100% var(--c),
linear-gradient(red,red) top /100% var(--b),
linear-gradient(red,red) right /var(--b) 100%;
background-repeat:no-repeat;
clip-path:
polygon(0% calc(var(--c) - var(--b)), calc(var(--c) - var(--b)) 0%,
100% 0%,
100% calc(100% - var(--c) + var(--b)), calc(100% - var(--c) + var(--b)) 100%,
0% 100%);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box" style="--b:3px;--c:10px">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box" style="--b:1px;--c:20px">
<div class="content">
AA BB
</div>
</div>
<div class="box" style="--b:1px;--c:5px">
<div class="content">
AA BB
</div>
</div>
一个Codepen demo玩代码
实现此效果的一种方法是使用应用了 clip-path
的 ::before
伪元素。
在下面的示例中,我重复使用了值 10px
和 2px
,尽管这些值可以直接替换为 CSS 自定义属性 如:
:root {
--cube-depth: 10px;
--cube-border: 2px;
}
然后在整个样式表中用作 var(--cube-depth)
和 var(--cube-border)
。
工作示例:
.cube {
position: relative;
float: left;
margin: 0 4px 8px 4px;
padding: 2px 2px calc(2px + 10px) calc(2px + 10px);
color: rgb(237, 62, 68);
box-sizing: border-box;
}
.cube::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(237, 62, 68);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px, 10px 0, 10px calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) 2px, 10px 2px);
}
.size-80x100 {
width: calc(100px + 10px);
height: calc(80px + 10px);
}
.size-80x200 {
width: calc(200px + 10px);
height: calc(80px + 10px);
}
.size-80x360 {
width: calc(360px + 10px);
height: calc(80px + 10px);
}
.size-80x440 {
width: calc(440px + 10px);
height: calc(80px + 10px);
}
<div class="cube size-80x100">80 x 100</div>
<div class="cube size-80x440">80 x 440</div>
<div class="cube size-80x360">80 x 360</div>
<div class="cube size-80x200">80 x 200</div>
我在网上找到了这张图片,并尝试用 css 创建这些框。我失败了。有谁知道如何解决这个问题?
这是我的代码。左边栏有问题:
.box {
position: relative;
margin: 10px;
display: inline-block;
}
.content {
border-top: 2px solid red;
border-right: 2px solid red;
padding: 5px;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: -10px;
height: 100%;
width: 10px;
background-color: red;
transform: skew(-45deg) rotate(-45deg);
}
.box:after {
content: '';
position: absolute;
bottom: -10px;
left: -5px;
height: 10px;
width: 100%;
background-color: red;
transform: skew(-45deg);
}
<div class="box">
<div class="content">
CONTENT<br />
Some more content
</div>
</div>
border-image
和 linear-gradient
可以做到:
.box {
margin: 10px;
display: inline-block;
border-style:solid;
border-width:2px 2px 15px 15px;
border-image-slice:2 2 15 15; /* same as border-width*/
border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box">
<div class="content">
AA BB
</div>
</div>
使用 CSS 个变量可以更好地控制:
.box {
--b:2; /* border length (without unit!!)*/
--c:15; /* the cube perspective (without unit!!)*/
--g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
border-style:solid;
border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
border-image-slice:var(--b) var(--b) var(--c) var(--c);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box" style="--b:3;--c:10">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box" style="--b:1;--c:20">
<div class="content">
AA BB
</div>
</div>
<div class="box" style="--b:1;--c:5">
<div class="content">
AA BB
</div>
</div>
你也可以把它放在你想要的任何方向:
.box {
--b:2; /* border length (without unit!!)*/
--c:15; /* the cube perspective (without unit!!)*/
--g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
border-style:solid;
}
.bottom-left {
border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
border-image-slice:var(--b) var(--b) var(--c) var(--c);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-right {
border-width:calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) ;
border-image-slice: var(--c) var(--c) var(--b) var(--b);
border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-left {
border-width:calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) ;
border-image-slice:var(--c) var(--b) var(--b) var(--c);
border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.bottom-right {
border-width:calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) ;
border-image-slice:var(--b) var(--c) var(--c) var(--b);
border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.content {
padding: 5px;
}
<div class="box bottom-left">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box top-right" style="--b:3;--c:10">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box bottom-right" style="--b:1;--c:20">
<div class="content">
AA BB
</div>
</div>
<div class="box top-left" style="--b:1;--c:5">
<div class="content">
AA BB
</div>
</div>
我们还可以通过调整颜色和使用 clip-path
.box {
--b:2px; /* border length*/
--c:15px; /* the cube perspective */
--g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
margin: 10px;
display: inline-block;
padding:var(--b) var(--b) var(--c) var(--c);
background:
linear-gradient(-45deg,transparent var(--g),#cc0404 0) left /var(--c) 100%,
linear-gradient(135deg,transparent var(--g),red 0) bottom /100% var(--c),
linear-gradient(red,red) top /100% var(--b),
linear-gradient(red,red) right /var(--b) 100%;
background-repeat:no-repeat;
clip-path:
polygon(0% calc(var(--c) - var(--b)), calc(var(--c) - var(--b)) 0%,
100% 0%,
100% calc(100% - var(--c) + var(--b)), calc(100% - var(--c) + var(--b)) 100%,
0% 100%);
}
.content {
padding: 5px;
}
<div class="box">
<div class="content">
CONTENT<br> Some more Content
</div>
</div>
<div class="box" style="--b:3px;--c:10px">
<div class="content">
CONTENT<br> more Content
</div>
</div>
<div class="box" style="--b:1px;--c:20px">
<div class="content">
AA BB
</div>
</div>
<div class="box" style="--b:1px;--c:5px">
<div class="content">
AA BB
</div>
</div>
一个Codepen demo玩代码
实现此效果的一种方法是使用应用了 clip-path
的 ::before
伪元素。
在下面的示例中,我重复使用了值 10px
和 2px
,尽管这些值可以直接替换为 CSS 自定义属性 如:
:root {
--cube-depth: 10px;
--cube-border: 2px;
}
然后在整个样式表中用作 var(--cube-depth)
和 var(--cube-border)
。
工作示例:
.cube {
position: relative;
float: left;
margin: 0 4px 8px 4px;
padding: 2px 2px calc(2px + 10px) calc(2px + 10px);
color: rgb(237, 62, 68);
box-sizing: border-box;
}
.cube::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(237, 62, 68);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px, 10px 0, 10px calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) 2px, 10px 2px);
}
.size-80x100 {
width: calc(100px + 10px);
height: calc(80px + 10px);
}
.size-80x200 {
width: calc(200px + 10px);
height: calc(80px + 10px);
}
.size-80x360 {
width: calc(360px + 10px);
height: calc(80px + 10px);
}
.size-80x440 {
width: calc(440px + 10px);
height: calc(80px + 10px);
}
<div class="cube size-80x100">80 x 100</div>
<div class="cube size-80x440">80 x 440</div>
<div class="cube size-80x360">80 x 360</div>
<div class="cube size-80x200">80 x 200</div>