小编The*_*ung的帖子

如何用CSS歪斜图像？

我想扭曲像这样的图像

在此输入图像描述

它在我申请时工作 div

在此输入图像描述

现在我想使用此代码img标记它不起作用.

在此输入图像描述

这是我的实时代码:

https://jsfiddle.net/dbkvdq3u/5/

.steps-widget .step-img-box {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
}
.steps-widget .step-img-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  z-index: -1;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.steps-widget .step-img-box:after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, …

Run Code Online (Sandbox Code Playgroud)

jquery html5 transform css3 skew

The*_*ung

2015 07-17

1
推荐指数

1
解决办法

1148
查看次数