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>

enter image description here

Answer 1

你可以使用一些偏斜的伪元素：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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%);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

你可以通过边界截止来做到这一点。

举个例子：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

这应该这样做。

class Parent { }

class Son : Parent { }

class Daughter : Parent { }

class MainClass
{
  private void Iterate(IEnumerable<Parent> list)
  {
    foreach (Daughter daughter in list.OfType<Daughter>()) {
        ...SOME CODE...
    }
  }
}

示例：CodePen

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

3 个答案: