Responsive 45deg inverted rectangle background covering an image

how to dynamically change text color based on a background color css
change text color based on background image
css invert color background image
css background image
responsive background image css tricks
css background image size to fit screen
responsive div background image
mix-blend-mode: difference;

Inside of a square container, I want a 45deg rotated square, which can be responsive.Here is the code pen that I can do so far:

<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

This is not responsive at all I think. What will be the best solution here, to use media queries? svg inverted square or ?

You can consider a gradient and multiple background:

.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>

Methods for Contrasting Text Against Backgrounds, Responsive 45deg inverted rectangle background covering an image. css contrast text against background css background image slanted div generator This is especially tricky when trying to make this all responsive. The first thing we need to do is make the background image cover the entire container element. This is simple with: background-size: cover; If you don’t know about that trick, you need to learn it. Read up on the CSS background-size property.

You can use percentage instead of pixels to make it responsive:

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

Exmaple

How To Create A Responsive Background Image Using CSS: Free , We set the background-image on the header container, we give the h2 white text over the image gives us a result that's the image inverted where the text overlaps it. 50%/ cover This is because the rectangular element gets the filter applied, so we Responsive Knockout Text With Looping Video. 1) my desktop IE11 fails your ‘cover’ variable, apparently taking actual dimensions, and with liquid background image proportion fixed, and background size relative to windows size, shrinking background side edges inside windows edges, when window is not in correct proportion (whatever the windows size) to satisfy a set background-image

    <!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>

How to Quickly Create Shapes in Pure CSS, Examples of Responsive Full Background Images. Having a large photo that covers the entire background of a web page is currently quite popular. Here are a few  Drawing. We’ll use Sass (SCSS) to draw these images so we can make use of variables for a color palette. That will make the code shorter, easier to read and change darkened or lighter variants of colors.

Css triangle images, Creating an inverted triangle, we need to manipulate the border property of the bottom. #triangle_down { width: 0; height: 0; border-top: 140px  One of best cool features of CSS3 is that it reduces the use of images in web designs and allows you to create different shapes in CSS. Commonforms that you usually see in Photoshop or Illustrator can now be done using CSS3.

Sloped edges with consistent angle in CSS, The architecture well be looking at today is called ITCSS – Inverted Triangle CSS​. Css triangle background code examples demo image: responsive It takes advantage of padding being calculated against parent's width to cover a big diagonal-box { background-image: linear-gradient(45deg, # 6303B1, #ff0099); } . Craig Buckler demonstrates a neat trick for applying CSS3 transforms to background images. Rotating and skewing elements with stunning backgrounds will now be a breeze!

Creating Responsive Shapes With Clip-Path And Breaking Out Of , can show background images and only needs one HTML element negative offset so it correctly covers the top left and top right corners: The problem starts when you go from a fixed-width scale to a responsive scale. I created responsive CSS-only triangles using one div: Pure CSS responsive triangles. It takes advantage of padding being calculated against parent’s width to cover a big fixed-width triangle. For an up-pointing triangle and 100% width:

Comments
  • In which media queries series you what you rotate 45 degrees.
  • this is great, do you mind to explain how did you achieve this?(the one similar to my code) would like to get into your mind how you approached!
  • @HarisKhan all the trick is within the gradient .. as you can see I have made 4 of them each one will create a triangle shape in a corner and all will have the same width/height (taking a quarter 50% 50%) and each placed in a corner (top left/ top right, etc) ... to better understand, change the color of the gradient individually to notice the trick
  • Thanks temani! there was a slight problem, due to background being slightly visible when stretched or shrink the browser. Solved it by making background-size: 50.1% 50.1% . Don't know if it is good solution...lot to learn for me on background there :D
  • @HarisKhan yes indeed, in some browser you will have a small gap due to rendring and yes increasing a size a bit is a good solution ;) .. you may also notice that within the gradient I used 49.8% instead of 50% to avoid having a jagged edge (try 50% to see the effect)