覆盖图像的响应式 45deg 倒矩形背景

Question

一个方形容器里面，我想要一个45度旋转的方形，可以responsive.Here目前能做到的码笔：

<div class="container">
  <figure>
      <img src="https://placekitten.com/500/500"/>
    <figcaption class="caption-1"><span class="caption-1-text">Best Kitty</span></figcaption>
  </figure>
</div>


.container {
  display: flex;
}

img {
  width: 100%;
  height: 100%;
}

figure {
  position: relative;
  max-width: 500px;
  height: 500px;
}

.caption-1 {
  font-size: 1.25em;
  position: absolute;
  top: 18%;
  right: 25%;
  background-color: white;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
}

.caption-1-text {
  display:block;
  transform: rotate(-45deg);
}

https://codepen.io/khanharis87/pen/KbNNYb

我认为这根本没有响应。使用媒体查询的最佳解决方案是什么？ svg 倒正方形或？

Answer 1

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"> 
</script>
<title>Untitled</title>
<style>
.container {
  display: flex;
}
figure{
  position: relative;
  max-width: 500px;
  height: 500px;
  background-image: url("https://placekitten.com/500/500");
  background-size: cover;
  background-color:#dfdfdf;
  width:100%;
  display: flex;
  margin: 0;
}
img {
  width: 100%;
  height: 100%;
}

figure {

}

.caption-1 {
  font-size: 1.25em;
  position: relative;
/*   top: 18%;
  right: 25%; */
  background-color: white;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  margin: auto;
  align-items: center;
  justify-content: center;
  display: flex;
}

.caption-1-text {
  display:block;
  transform: rotate(-45deg);
}
</style>
</head>
<body>
    <div class="container">
  <figure>
<!--       <img src="https://placekitten.com/500/500"/> -->
    <figcaption class="caption-1"><span class="caption-1-text">Best Kitty</span></figcaption>
  </figure>
</div>
</body>
</html>

Answer 2

您可以使用百分比而不是像素来使其响应：

figure {
  position: relative;
  width: 50%;
  height: 50%;
}

Exmaple

Answer 3

可以考虑一个渐变和多个背景：

.box {
   display:inline-block;
   width:200px;
   height:200px;
   padding:10px; /*control the space around the rotated square*/
   border:1px solid;
   box-sizing:border-box;
   background:
      linear-gradient(to top    left, #fff1f2 49.8%,transparent 50%) top    left/50% 50% content-box,
      linear-gradient(to top    right,#fff1f2 49.8%,transparent 50%) top    right/50% 50% content-box,
      linear-gradient(to bottom left, #fff1f2 49.8%,transparent 50%) bottom left/50% 50% content-box,
      linear-gradient(to bottom right,#fff1f2 49.8%,transparent 50%) bottom right/50% 50% content-box,
      var(--i,url(https://picsum.photos/200/300?image=0));
    background-repeat:no-repeat;
   
}

<div class="box">
</div>

<div class="box" style="--i:url(https://picsum.photos/200/300?image=1069);width:150px;height:150px;">
</div>
<div class="box" style="--i:url(https://picsum.photos/200/300?image=1069);width:150px;height:150px;padding:20px;">
</div>

您也可以对代码执行相同的操作：

figure {
  display:inline-block;
   position:relative;
}

figure figcaption {
   position:absolute;
   top:10px;
   left:10px;
   right:10px;
   bottom:10px;
   box-sizing:border-box;
   background:
      linear-gradient(to top    left, #fff1f2 49.8%,transparent 50%) top    left,
      linear-gradient(to top    right,#fff1f2 49.8%,transparent 50%) top    right,
      linear-gradient(to bottom left, #fff1f2 49.8%,transparent 50%) bottom left,
      linear-gradient(to bottom right,#fff1f2 49.8%,transparent 50%) bottom right;
    background-size:50% 50%;
    background-repeat:no-repeat;
}

<figure>
  <img src="https://placekitten.com/150/150" />
  <figcaption class="caption-1"></figcaption>
</figure>

<figure>
  <img src="https://placekitten.com/200/200" />
  <figcaption class="caption-1"></figcaption>
</figure>

覆盖图像的响应式 45deg 倒矩形背景

Responsive 45deg inverted rectangle background covering an image

html

css

responsive