Question

您好可以使图像具有倾斜的右侧边框。

＆＃13;

.fh {
  border-right: 180px solid transparent;
}

＆＃13;

<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>

＆＃13;

所以我基本上想要的是这个http://prntscr.com/glcq2l，而是使用图像。

Answer 1

一种可能的解决方案是使用旋转的div并将溢出设置为隐藏。有一个环绕它，以防万一你想使用它，它可以更容易放置图像.. fiddle to play around here（我离开边界只是为了帮助理解发生了什么）

（身体上的背景图像就是为了表明切角是透明的而不是边框或类似的东西。）

body {
  background-image: url(https://i.stack.imgur.com/xxGZk.jpg);
}

* { box-sizing: border-box; }

.wrap {
  position: relative;
  width: 400px;
  height: 200px;
  border: solid 2px black;
  overflow:hidden;
}
.fh {
  position: relative;
  top: -5px;
  left: -250px;
  width: 600px;
  height: 700px;
  transform: rotate(45deg);
  overflow: hidden;
  border-top:solid 1px red;
  border-bottom:solid 1px red;
  border-left:solid 1px orange;
  border-right:solid 1px lime;
}
.fh img {
  position: absolute; 
  margin: -30px 0px 0 30px;
  top: 0px;
  left: 0px;
  border:solid 2px green;
  width: 400px;
  height: 200px;
  transform: rotate(-45deg);
}

<div class="wrap">
  <div class="fh">
    <img src="http://lorempixel.com/400/200/sports/1/" >
  </div>
</div>

这里也可以找到很多答案和可能的解决方案：Cut Corners using CSS当然需要根据您的要求进行调整。

Html倾斜的图像？

1 个答案: