Отзывчивый перевернутый прямоугольник на 45 градусов, закрывающий изображение - PullRequest
Новая
       6

Отзывчивый перевернутый прямоугольник на 45 градусов, закрывающий изображение

0 голосов
/ 19 декабря 2018

Внутри квадратного контейнера я хочу повернутый на 45 градусов квадрат, который может быть отзывчивым. Вот кодовое перо, которое я могу сделать до сих пор: 

<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 перевернутый квадрат или?

Ответы [ 3 ]

0 голосов
/ 19 декабря 2018

Вы можете использовать процент вместо пикселей, чтобы сделать его отзывчивым: 

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

Exmaple

0 голосов
/ 19 декабря 2018

Можно рассмотреть градиент и несколько фонов: 

.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>
0 голосов
/ 19 декабря 2018 
    <!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>
...