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

【问题标题】：Irregular Div shape Distort one corner only不规则的 Div 形状仅扭曲一个角
【发布时间】：2015-07-16 22:02:59
【问题描述】：

如何创建这样的 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>

【问题讨论】：

有很多方法可以做到这一点。你试过什么？提示（使用两个 div...会更容易）
@Paulie_D 我试过了：transform: perspective(800px) rotateX(-20deg); transform-origin: left center; 和 border-bottom: 100px solid #6eeb71; border-left: 0 solid transparent; border-right: 70px solid transparent;

标签： css svg transform css-shapes

【解决方案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%);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

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

【讨论】：

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

【讨论】：