Question

我必须创建一个倾斜的div，我已经浏览了互联网上的许多可用内容但没有得到预期的结果。我已将图像（slanted Images）附加到预期的倾斜div中。我希望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保持设置和右边框。在这里留下我的意思：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: