Coisox Coisox - 4 months ago 8
CSS Question

Rotate then resize based on parent's dimension

With CSS only (no js), is it possible to rotate a div with background image, then set the width and height to fit the screen? Can it be done without CSS SVG clipping? There's no particular reason why I don't want SVG. Just asking whether its possible or not.

I don't mind about the HTML structure. You can suggest as many div or container

enter image description here

Answer

You could achieve this like this HTML

<body>
<div class="container">
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
<div class="grad4"></div>
</div>
</body>

CSS

   body{
  background:#000;
  }
  .container{
  width:100vw;
  height:100vh;
  background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-145812.jpg');
  background-size:cover;
}
.grad1{
  float:left;
  position:relative;
  width:50%;
  height:50%;  
    background: -webkit-linear-gradient(left top, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
    .grad2{
  float:right;
  position:relative;
  width:50%;
  height:50%;  
    background: -webkit-linear-gradient(right top, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom left, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom left, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom left, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
    .grad3{
  float:left;
  position:relative;
  width:50%;
  height:50%;  
    background: -webkit-linear-gradient(left bottom, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}
  .grad4{
  float:right;
  position:relative;
  width:50%;
  height:50%;  
    background: -webkit-linear-gradient(right bottom, black 50%, transparent 50.1%, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top left, black 50%, transparent 50.1%, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top left, black 50%, transparent 50.1%, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top left, black 50%, transparent 50.1%, transparent); /* Standard syntax (must be last) */}

It's a little bloated but the css could probably be halved with some use of transform. 100% responsive. It won't work in browsers that don't support gradients. old browsers.

CodePen

Comments