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

Question

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

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

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

Answer 1

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

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

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

DEMO

输出:

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>