Html slanted image?

javascript html css

65 观看

1回复

9 作者的声誉

Hello is it possible to make a image have a slanted right side border.

.fh {
  border-right: 180px solid transparent;
}
<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>

So what I basically want is this http://prntscr.com/glcq2l but with the image instead.

作者: Terry Chen 的来源 发布者: 2017 年 9 月 15 日

回应 1


1

13138 作者的声誉

One possible solution is to have a div which you rotate and set overflow hidden. There is a wrap around it, just in case you want to use it it makes it easier to place the image.. fiddle to play around here (I left the borders just to help understand whats going on)

(The background image on the body is just there to show that the cut off corner is transparent and not a border or anything like that.)

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>

A lot of answers and possible solutions can also be found here: Cut Corners using CSS of course they need to be tweaked to your request.

作者: caramba 发布者: 2017 年 9 月 15 日
32x32