Question 45057 in Html Question posted in
Some basic documentation can be found here.

Placing a tilted rectangle behind image – Html

I am trying to do this in css and html:

enter image description here

What I got so far:

<div id="logo-container">
  <img decoding="async" src="https://articlett.de/wordpress/wp-content/uploads/elementor/thumbs/Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black-q1r7rix22o6ztvjf52cf1pt1ojwen0jx1zyxtcyq8m.png" title="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" alt="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" loading="lazy"> 
  <div id="logo-shadow">
  </div>
</div>

css:

#logo-shadow {
  width: 250px;
    height: 50px;
    transform: skew(20deg);
    position: absolute;
  top: 10px;
  left: 10px; 
  padding: 5px;
  background-color: green;
  z-index: -1;
 }

#logo-container {
    position: relative;    
}

fiddle: https://jsfiddle.net/hobqmxjp/

enter image description here

Despite not knowing how to get the right shape with css, the problem is, that I need the background rectangle to have the width according to the logo file and not a fix width/height. So it also works responsive.

How can I achieve these two things?

Also

Tags:

3

Answers


  1. 0 
     #logo-container {
  position: relative;
  padding: 0 10px;
  display: inline-block;
 }

 #logo-container img {
   width: 100%;    
  }

  #logo-shadow {
   width: 100%;
   height: 50%;
   transform: skewY(-2deg);
   position: absolute;
   bottom: 0;
   left: 0; 
   padding: 5px;
   background-color: green;
   z-index: -1;
  }
    <div id="logo-container">
  <img decoding="async" src="https://articlett.de/wordpress/wp-content/uploads/elementor/thumbs/Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black-q1r7rix22o6ztvjf52cf1pt1ojwen0jx1zyxtcyq8m.png" title="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" alt="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" loading="lazy"> 
  <div id="logo-shadow">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The following will scale with the image. I have changed skew to rotate as I think this is more likely to give the desired look.

    #logo-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* space of text including padding */
  height: 55%; /* desired height */
  transform: rotate(-2deg); /* rotation of the rectangle */
  background-color: gray;
  z-index: -1;
}

#logo-container {
  position: relative;
  display: inline-block;
  padding: 0 15px;
}
    <div id="logo-container">
  <img decoding="async" src="https://articlett.de/wordpress/wp-content/uploads/elementor/thumbs/Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black-q1r7rix22o6ztvjf52cf1pt1ojwen0jx1zyxtcyq8m.png" title="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" alt="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black"
    loading="lazy">
  <div id="logo-shadow">
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You just need to modify the css using the value fit-content with the width property of the container. This way, its size is based on the size of he biggest element which is at this point the image. Then, you can use % values to give a width and height to your #logo-shadow. You can also use relative units if you want to. Finally, you can use rotate() to rotate your shape.

    #logo-shadow {
  width: 100%;
  height: 50%;
  transform: rotate(-1deg);
  position: absolute;
  bottom: 10px;
  left: 10px; 
  background-color: gray;
  z-index: -1;
}

#logo-container {
  position: relative;  
  width: fit-content;
}
    <div id="logo-container">
  <img decoding="async" src="https://articlett.de/wordpress/wp-content/uploads/elementor/thumbs/Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black-q1r7rix22o6ztvjf52cf1pt1ojwen0jx1zyxtcyq8m.png" title="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" alt="Articlett_Logo_RGB_1100x245px_2021-09-18_RZ_black" loading="lazy"> 
  <div id="logo-shadow">
  </div>
</div>

    Hope it will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search