如何用css创建立方体窗口?
[英] How to create cube window with css?
本文介绍了如何用css创建立方体窗口?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在网上找到了这张图片，并尝试用 css 创建这些盒子.我失败了.有谁知道如何解决这个问题?
这是我的代码.问题是左边的栏:
.box {位置:相对；边距:10px；显示:内联块；}.内容 {边框顶部:2px 纯红色；右边框:2px 纯红色；填充:5px；}.box:之前{内容: '';位置:绝对；顶部:0；左:-10px；高度:100%；宽度:10px；背景颜色:红色；变换:倾斜(-45度)旋转(-45度)；}.box:在{之后内容: '';位置:绝对；底部:-10px；左:-5px；高度:10px；宽度:100%；背景颜色:红色；变换:倾斜(-45度)；}
<div class="内容">内容
还有一些内容
解决方案
border-image with linear-gradient 可以做到:
.box {边距:10px；显示:内联块；边框样式:实心；边框宽度:2px 2px 15px 15px;边框图像切片:2 2 15 15；/* 与边框宽度相同 */边框图像源:线性渐变(-45deg，透明 9px，红色 0 计算(100% - 9px)，透明 0)；}.内容 {填充:5px；}
<div class="内容">内容
更多内容
<div class="box"><div class="内容">内容
更多内容
<div class="box"><div class="内容">AA BB
使用 CSS 变量可以更好地控制:
.box {--b:2;/* 边框长度(无单位！！)*/--c:15;/* 立方体透视图(无单位！！)*/--g:calc((var(--c) - var(--b))*0.707px);/* 0.707 = cos(45deg) = sin(45deg) */边距:10px；显示:内联块；边框样式:实心；边框宽度:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);边框图像切片:var(--b) var(--b) var(--c) var(--c);边界图像源:线性梯度(-45deg，透明变量(--g)，红色0 calc(100％ - 变量(--g))，透明0)；}.内容 {填充:5px；}
<div class="内容">内容
更多内容
<div class="box" style="--b:3;--c:10"><div class="内容">内容
更多内容
<div class="box" style="--b:1;--c:20"><div class="内容">AA BB
<div class="box" style="--b:1;--c:5"><div class="内容">AA BB
你也可以在任何你想要的方向上使用它:
.box {--b:2;/* 边框长度(无单位！！)*/--c:15;/* 立方体透视图(无单位！！)*/--g:calc((var(--c) - var(--b))*0.707px);/* 0.707 = cos(45deg) = sin(45deg) */边距:10px；显示:内联块；边框样式:实心；}.左下方 {边框宽度:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);边框图像切片:var(--b) var(--b) var(--c) var(--c);边界图像源:线性梯度(-45deg，透明变量(--g)，红色0 calc(100％ - 变量(--g))，透明0)；}.右上 {边框宽度:calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) ;边框图像切片:var(--c) var(--c) var(--b) var(--b);边界图像源:线性梯度(-45deg，透明变量(--g)，红色0 calc(100％ - 变量(--g))，透明0)；}.左上方 {边框宽度:calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) ;边框图像切片:var(--c) var(--b) var(--b) var(--c);边界图像源:线性梯度(45度，透明变量(--g)，红色0计算(100％-变量(--g))，透明0)；}.右下{边框宽度:calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) ;边框图像切片:var(--b) var(--c) var(--c) var(--b);边界图像源:线性梯度(45度，透明变量(--g)，红色0计算(100％-变量(--g))，透明0)；}.内容 {填充:5px；}
<div class="内容">内容
更多内容
<div class="box top-right" style="--b:3;--c:10"><div class="内容">内容
更多内容
<div class="box bottom-right" style="--b:1;--c:20"><div class="内容">AA BB
<div class="box top-left" style="--b:1;--c:5"><div class="内容">AA BB
我们还可以通过调整着色和使用 clip-path
的不同技术来添加更多 3D 效果.box {--b:2px;/* 边框长度*/--c:15px;/* 立方体透视 */--g:calc(var(--c)*0.707);/* 0.707 = cos(45deg) = sin(45deg) */边距:10px；显示:内联块；填充:var(--b) var(--b) var(--c) var(--c);背景:线性梯度(-45deg,transparent var(--g),#cc0404 0) left/var(--c) 100%,线性梯度(135deg,transparent var(--g),red 0) 底部/100% var(--c),线性梯度(红色，红色)顶部/100% var(--b)，线性梯度(红色，红色)右/var(--b) 100%;背景重复:不重复；剪辑路径:多边形(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%);}.内容 {填充:5px；}
<div class="内容">内容
更多内容
<div class="box" style="--b:3px;--c:10px"><div class="内容">内容
更多内容
<div class="box" style="--b:1px;--c:20px"><div class="内容">AA BB
<div class="box" style="--b:1px;--c:5px"><div class="内容">AA BB
一个 Codepen 演示来玩代码
I found this image online and tryed to create these boxes with css. I failed. Has anyone an idea how to solve this problem?
This is my code. The problem is the left bar:
.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 with linear-gradient can do it:
.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>
With CSS variables to have better control:
.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>
You can also have it in any direction you want:
.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>
We can also add more 3D effect by adjusting the coloration and using a different technique with 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>
A Codepen demo to play with the code
这篇关于如何用css创建立方体窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
