Question

仅使用CSS（无js），是否可以使用背景图像旋转div，然后设置宽度和高度以适合屏幕？可以在没有CSS SVG剪辑的情况下完成吗？我没有特别的理由不想要SVG。只是询问它是否可能。

我不介意HTML结构。你可以建议尽可能多的div或容器

Answer 1

您可以使用css制作钻石，如下所示

<强> HTML

<div id="diamond"></div>

<强> CSS

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

我发现并且我认为这与您的问题类似。

CodePen

Answer 2

是的，这是可能的。

HTML

<!DOCTYPE html>
<html>
<body>
<div class="flip3D">
  <div class="back"></div>
  <div class="front"></div>
</div>
</body>
</html>

CSS

.flip3D{ width:240px; height:200px;float:left; }
.flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:url(right1.png); width:240px; height:200px; border-radius: 7px;
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
.flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background: url(right1.png); width:100%; height:100%; border-radius: 7px;
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

Answer 3

你可以这样做 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) */}

它有点臃肿，但css可能会因使用变换而减半。 100％响应。它不适用于不支持渐变的浏览器。旧浏览器。

CodePen

旋转然后根据父级维度调整大小

3 个答案: