仅使用边框创建倾斜的 Div，没有背景颜色

Question

我必须创建一个倾斜的 div，我浏览了互联网上的许多可用内容，但没有得到预期的结果。 我已经为预期的倾斜 div 附加了图像（slanted Images）。我希望 div 使用边框看起来倾斜但不使用背景颜色。在边界的情况下，边缘之一是不可见的。请让我知道如何实现它。 new Image（倾斜div的附件图片）

#slanted_div{ 
	position: relative; 
	display: inline-block; 
	padding: 1em 5em 1em 1em; 
	overflow: hidden; 
	color: #08393A; 
}
#slanted_div:before{ 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	border:1px #08393A; 
	-webkit-transform-origin: 100% 0; 
	-ms-transform-origin: 100% 0; 
	transform-origin: 100% 0; 
	-webkit-transform: skew(-45deg); 
	-ms-transform: skew(-45deg); 
	transform: skew(-45deg); 
	z-index: -1; 
	border-style: solid; 
}

<div id="slanted_div"></div>

Answer 1

检查您是否可以为#slanted_div 设置固定宽度和高度，并添加一个 ::after 选择器以将其用作左下边框，而 ::before 仍然设置右边框。给你一个例子来说明我的意思：

#slanted_div{ 
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 300px;
  height: 100px;
}
#slanted_div::before{ 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px rgb(8, 57, 58) solid;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}
#slanted_div::after{ 
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 202px;
  height: 100%;
  border-bottom: 1px rgb(8, 57, 58) solid;
  border-left: 1px rgb(8, 57, 58) solid;
  border-right: 0;
  z-index: -1;
}

<div id="slanted_div"></div>