不规则 Div 形状仅扭曲一个角

Question

如何创建这样的 div 形状？我已经阅读了很多技术，但我无法弄清楚这一点。 div 内是不应扭曲的文本。

欢迎任何技术，它不必是纯粹的css。

我的HTML结构：

<div class="intro">
                <div class="intro-header">
                    <h1>Headline WOW</h1>
                </div>
                <div class="intro-text">
                    <p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
                </div>
</div>

Answer 1

你可以为此使用一些倾斜的伪元素：

.first,
.last {
  text-align: center;
  line-height: 80px;
  height: 80px;
  background: green;
  position: relative;
  display: inline-block;
  width: 400px;
  margin-bottom: 20px;
}
.first:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  transform: SkewY(2deg);
  transform-origin: bottom left;
  background: inherit;
}
.last:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  transform: SkewY(2deg);
  transform-origin: bottom right;
  background: inherit;
}

<div class="first">FIRST LINE</div>

<div class="last">LAST LINE</div>

另一种（可能）是使用渐变 （尽管这可能会导致锯齿状边缘）。解决方案归功于 Harry

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
  height: 400px;
  width: 400px;
  background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}

<div></div>

Answer 2

您可以使用边框截断来做到这一点。

举个例子：

.top {
  height: 300px;
  background: red;
  position: relative;
  width: 300px
}
.top:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 10px solid white;
  border-right: 300px solid red;
  width: 0;
}
.bottom {
  height: 300px;
  background: red;
  position: relative;
  width: 300px;
  padding-top: 10px;
  margin-top: 0px;
}
.bottom:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 10px solid white;
  border-left: 300px solid red;
  width: 0;
}

<div class="top">Text</div>
<div class="bottom">Text</div>

Answer 3

这应该可以做到。

html,body{
  margin:0;
  height:100%;
}
.intro{
  width:400px;
  display:inline-block;
  background:red;
  padding:50px;
}
.intro-header,.intro-text{
  width:100%;
  display:inline-block;
  background:#ccc;
  text-align:center;
  position:relative;
}
.intro-header{
  margin-bottom:50px;
}
.intro-header:after{
  position:absolute;
  left:0;
  content:"";
    width: 0; 
    height: 0; 
    border-left: 400px solid transparent;
    border-top: 20px solid #ccc;  
}
.intro-text:after{
  position:absolute;
  top:-20px;
  left:0;
  content:"";
    width: 0; 
    height: 0; 
    border-right: 400px solid transparent;
    border-bottom: 20px solid #ccc;  
}

示例：CodePen

不规则 Div 形状仅扭曲一个角

Irregular Div shape Distort one corner only

css

svg

transform

css-shapes

不规则 Div 形状 仅扭曲一个角

Irregular Div shape Distort one corner only

css

svg

transform

css-shapes

不规则 Div 形状仅扭曲一个角