歪斜的HTML / CSS [重复]

Question

此问题已经在这里有了答案：

How to create div with irregular shape4个答案
Create a slanted edge to a div5个答案
Shape with a slanted side (responsive)3个答案
CSS3 Transform Skew One Side5个答案

我正在尝试使用HTML / CSS创建以下内容：

对于第一个概念，我尝试了以下代码：

.box1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  transform: skewX(-20deg) translateX(-40%);
  /* position: absolute; */
  z-index: 10;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"/>

<div class="container">
  <div class="columns">
    <div class="column is-4 box1 has-text-centered">
      <img src="assets/graph.png" />
    </div>
    <div class="column is-6">

    </div>
  </div>
</div>

哪个会给我以下结果：

有没有办法像我的第一张照片那样实现偏斜div的目标？

Answer 1

典型的方法是在CSS中创建一个容器，然后使用我定位的透明图像。

Freecodecamp对此有很好的教程。 DEMO

.mask-skew {
	transform: skewX(-20deg);
	border-radius: 10px;
	width: 300px;
  height: 300px;
  overflow: hidden;
  
  margin: 40px auto;
  border: 2px solid orange;
}

.art-skew {
	transform: skewX(20deg);
	position: relative;
	left: -52px;
}

<body style="background: #999;">
  
	<div class="mask-skew">
		<img class="art-skew" src="http://lorempixel.com/450/300/sports/" alt="">
	</div>
  
</body>
</html>

歪斜的HTML / CSS [重复]

问题描述投票：-1回答：1

1个回答

最新问题

歪斜的HTML / CSS [重复]

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1