带有两个切边的矩形

Question

我不确定这个形状的具体名称是什么,但我可以称之为"半平行四边形"吗？我想纯粹使用CSS/CSS3制作这个形状.有帮助吗？还是教程？

Answer 1

你可以使用如下的伪元素来做到这一点.方法是从框的左下角和右上角切出三角形.只要身体背景是纯色,该方法可以与纯色和形状内的图像一起使用.当身体背景是非纯色时,这种方法不起作用,因为边框黑客需要纯色背景.

这种方法的优点是它可以支持每侧不同角度的切口(例如在两侧的三角形切口的斜边彼此不平行的问题中).

div {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
}
div:before {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: transparent transparent white white;
  border-width: 20px 0px 0px 15px;
  left: 0;
  top: 80px;
}
div:after {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: white white transparent transparent;
  left: 170px;
  top: 0px;
}
.with-img {
  background: url(http://lorempixel.com/100/100);
}

<div></div>
<br>
<div class="with-img"></div>

示例2:您还可以使用渐变来实现类似的效果.只需1个渐变就足以在两侧产生类似角度的切口.如果需要不同的角度,则应使用两个梯度.然而,当身体背景是非纯色时,这里提到的多重梯度方法将不起作用.

div {
  width: 200px;
  height: 100px;
  position: relative;
}
.with-single-gradient {
  background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
  background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
  background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}

<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>

示例3:这也可以使用SVG创建,是最好的方法.它所需要的只是一个path能够创造所需形状的元素.

<svg viewBox='0 0 100 60' width='200px' height='120px'>
  <path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>

在Chrome v24,Firefox v19,Safari v5.1.7(在Windows上)和IE v10上进行了测试.它们是旧版本,但也应该使用最新版本.

注意:小于10的IE版本不支持此SO线程中提到的渐变.