Question

我试图仅使用CSS（白色表单）制作此表单： enter image description here

但是我的css正在制作平行四边形，我只想制作一面并且它也会改变我的图像，我只想变形容器并将我的图像保留为原始形状加上我的css不是。

这是我的HTML

<div class="header__logo">
    <img src="images/logo.jpg" alt="Skihouse">
</div>

我的css：

.header__logo {
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
  background: red;
  padding: 1em;
  background-color: #FFF; }

以下是关于它如何被击败的结果：

enter image description here

希望你们指导我，提前感谢您的时间！此致！

Answer 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="image">
    </div>
  <div class="skew">
    </div>
  </div>
</body>
</html>

.container
{
  width:200px;
  height:50px;
  position:relative;
  overflow:hidden;
}

.image
{
  width:200px;
  height:50px;
  background:red;
  float:left;
}

.skew{
  position:absolute;
right:-20px;

  top:0px;
  width:30px;
  height:50px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
  background: red;
  padding: 1em;
  background-color: #FFF; }

试试这个。歪斜一个容器并把它放在图像上方，你之前做的是，你正在扭曲图像，但理想情况下你应该在该图像的顶部放置一个倾斜的div，它可以提供你想要的效果，然后将图像放入一个容器。

您也可以使用旋转而不是倾斜，但为此您需要相应地调整顶部和右侧的值。

Answer 2

根本不是将徽标倾斜，只需将图像保存在白色背景颜色上，然后使用::after（或::before，如果您愿意）在右侧绘制角度。

http://jsfiddle.net/bc2mcpst/

Answer 3

怎么样

<div class="header__logo">
  <div class="skewed"></div>
  <img class="header__logo__image" src="images/logo.jpg" alt="Skihouse">
</div>

和你的css

.header__logo {
  position: relative;
}
.skewed {
  -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);
  background-color: #FFF;
  position: absolute;
  left: -40px; (or decrease until you only see white part)
  top: 0px;
  width: 80%;
  display: block;
}
.header__logo__image {
  position: absolute;
  left: 0px;
  top: 0px;
}

一边是CSS平行四边形，里面有图像

3 个答案: