形状{

Question

rectangle with 2 cut edges

我不确定这个形状的具体名称是什么，但我可以称之为“半平行四边形”吗？我想纯粹使用 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版本不支持this SO thread中提到的渐变。

Answer 2

没有直线半径，但在这里你有一些教程。对于奇怪的形状，您需要使用形状和负空间的组合，基本上使用具有相同背景颜色的图形。好消息是你可以使用＆＃34;透明＆＃34;作为颜色，你可以＆＃34;假＆＃34;这个数字很简单。查看教程Shapes of CSS或yuo可以使用CSS Shape Generator或CSS Shape Generator 2等生成器，但它们将高度依赖于您的需求。就个人而言，我使用BG图像并成为一个快乐的露营者

Answer 3

要使这个形状你必须使用伪类。我希望它会帮助你

div {display：inline-block;保证金：20px;向左飘浮; }

形状{

width: 208px;
height: 130px;
background: red;
position: relative; }

形状：在{

之前

content: "";
position: absolute;
top: 0;
left: 0;    
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }

形状：在{

之后

content: "";
position: absolute;
bottom: 0;
left: 0;    
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }

demo

Answer 4

也可以使用2个渐变和背景大小：

＆＃13;

div {
  width: 1440px;
  height: 590px;
  background: 
    linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat, 
    linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
  background-size: 50% 100%;
}

＆＃13;

<div>
</div>

＆＃13;

也可以使用1个渐变和calc()：

＆＃13;

div {
  width: 1440px;
  height: 590px;
  background: 
    linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}

＆＃13;

<div>
</div>

＆＃13;

与重复问题https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius 相关：

＆＃13;

div {
  width:980px;
  height:460px;
  background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
    linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
  background-size:50% 100% ;
}

＆＃13;

<div>
  div shape
</div>
image
<img src="http://i.stack.imgur.com/M48zP.png" />

＆＃13;

Answer 5

对于第二种形状，请使用：

border-bottom-left-radius:50px;
border-top-right-radius:50px;

Check JSFiddle Demo

修改编辑问题并删除第二个形状。

Answer 6

您可以使用overflow: hidden;
skew按所需角度转换父级。将pseudoelement与该角度的负值相差不了。

使用此方法，您还可以将图像添加到背景中。

＆＃13;

div {
    height: 100px;
    width: 220px;
    overflow: hidden;
    position: relative;
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    transform: skewX(45deg);
}
div:before {
    content: '';
    position: absolute;
    left: 10px;
    height: 100px;
    width: 200px;
    background: red;
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

＆＃13;

<div></div>

＆＃13;

<强> FIDDLE

FIDDLE (with image)

带有两个切边的矩形

6 个答案:

形状{

形状：在{

形状：在{