gpt4 book ai didi

css - 具有切边、边框和透明背景的 Div

转载 作者:技术小花猫 更新时间:2023-10-29 10:56:45 25 4
gpt4 key购买 nike

我一直在尝试弄清楚如何在 CSS 中制作一个视觉上看起来像这样的自定义形状:

shape with cut out edges and border

具有background:rgba(44, 44, 48, 0.9)border:6px solid rgba(29, 30, 35, 0.9);

我的问题是我找不到使右上角和左下角边框看起来像我提供的图像的方法。尝试了 CSS-Tricks 上关于 CSS Custom Shape 的提示,但它似乎没有解决问题,因为它不能有背景。有什么想法吗?

最佳答案

如果你在 3d 中思考,你可以使用 perspectiverotateX() 属性来改变一个元素的一个或两个 Angular 。

这将允许您为容器的伪元素设置样式以赋予它们所需的形状并切掉右上角和左下角。

您还可以为形状提供所需的边框,(请参见以下演示):

DEMO

输出:

CSS shape with cut out edges and border

div {
position: relative;
width: 50%;
height: 300px;
margin: 10% auto;
background: rgba(0, 0, 0, 0.7);
border-top: 6px solid rgba(0, 0, 0, 0.8);
border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}
div:before,
div:after {
content: '';
position: absolute;
top: -6px;
width: 20%;
height: 100%;
}
div:before {
right: 100%;
background: inherit;
border-top: 6px solid rgba(0, 0, 0, 0.8);
border-left: 6px solid rgba(0, 0, 0, 0.8);
border-bottom: 6px solid rgba(0, 0, 0, 0.8);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(1px) rotateY(-0.15deg);
transform: perspective(1px) rotateY(-0.15deg);
}
div:after {
left: 100%;
border-top: 6px solid rgba(0, 0, 0, 0.8);
border-right: 6px solid rgba(0, 0, 0, 0.8);
border-bottom: 6px solid rgba(0, 0, 0, 0.8);
border-left: none;
background: inherit;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(1px) rotateY(0.15deg);
transform: perspective(1px) rotateY(0.15deg);
}
<div></div>

关于css - 具有切边、边框和透明背景的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12030835/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com