倾斜边缘 HTML/CSS [重复]答案

【问题标题】：Skewed edges HTML/CSS [duplicate]倾斜边缘 HTML/CSS [重复]
【发布时间】：2019-09-28 01:42:21
【问题描述】：

我正在尝试使用 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 的目标？

【问题讨论】：

您在结果中看到的具体问题是什么？不清楚您的问题是什么。
stackoverflow.com/questions/24819252/… （注意：链接的帖子被标记为重复... stackoverflow 的一个陷阱：人们可以将帖子标记为重复，而无需链接到重复的帖子...）跨度>
查看 css 剪辑路径属性，它非常适合它。并且使用像这样的实际背景图像会大量浪费用户必须下载的数据 - 永远不要这样做。如果剪辑路径不够，请尝试使用绝对定位的 SVG
我认为您对所看到的效果有些误解。上图中的 div 没有倾斜，而是形成了一个不成直角的边，或者可能有一个伪元素或其他完整元素位于顶部。或者它是通过 SVG 完成的。
@aequalsb 不确定您的意思，但作为重复项关闭的问题总是会在页面顶部显示它们重复的问题。

标签： html css

【解决方案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>

【讨论】：