Css 有两条切割边的矩形

---

我不知道这个形状的具体名称是什么，但我能称它为“半平行四边形”吗？我想纯粹使用CSS/CSS3制作这个形状。有什么帮助吗？或教程？

对于第二个形状，请使用以下命令：

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

编辑：

---

问题已被编辑，第二个形状已被删除。

您可以使用下面的伪元素进行编辑。方法是从长方体的左下角和右上角切出一个三角形。只要身体背景为纯色，此方法可用于形状内部的纯色图像。当主体背景为非纯色时，这种方法将不起作用，因为边界黑客需要纯色背景

这种方法的优点是，它可以在每一侧支持不同角度的切割（就像在问题中，每一侧三角形切割的斜边彼此不平行）

div{
背景：红色；
宽度：200px；
高度：100px；
位置：相对位置；
}
部门：以前{
位置：绝对位置；
身高：0；
宽度：0；
内容：''；
边框：20px纯白；
边框颜色：透明白色；
边框宽度：20px 0px 0px 15px；
左：0；
顶部：80px；
}
部门：之后{
位置：绝对位置；
身高：0；
宽度：0；
内容：''；
边框：20px纯白；
边框颜色：白色透明；
左：170px；
顶部：0px；
}
.与img{
背景：url(http://lorempixel.com/100/100);
}

没有直线半径，但这里有一些教程。对于奇怪的形状，您需要使用形状和负空间的组合，基本上使用具有相同背景颜色的图形。好消息是，你可以使用“透明”作为颜色，因此你可以用一种简单的方式“伪造”这些数字。请参阅教程或YOU可以使用类似或的生成器，但它们将高度取决于您的需要。就我个人而言，我会使用BG图像，做一个快乐的露营者。要制作这个形状，你必须使用伪类。 我希望它能帮助你

div{显示：内联块；边距：20px；浮点：左；}

形状{ 形状：以前{ 形状：后{

• 您可以使用

  溢出：隐藏；

• skew

  按所需角度变换父元素。按该角度的负数取消

  伪元素的倾斜
  

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

div{
高度：100px；
宽度：220px；
溢出：隐藏；
位置：相对位置；
-webkit变换：skewX（45度）；
-moz变换：skewX（45度）；
变换：skewX（45度）；
}
部门：以前{
内容：''；
位置：绝对位置；
左：10px；
高度：100px；
宽度：200px；
背景：红色；
-webkit变换：skewX（-45度）；
-moz变换：skewX（-45度）；
变换：skewX（-45度）；
}

---

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

div{
宽度：1440px；
高度：590px；
背景：
线性梯度（45度，透明80px，#FF0000 80px）没有重复，
线性梯度（-135度，透明160px，#FF0000 160px）右上角无重复；
背景大小：50%100%；
}

对于下图，a

div

或

span

具有

边框右上半径

和

边框左下半径

检查此提琴@Praveen是的，下图使用边框半径，但我的问题是，有没有办法使其成为直线？就像上图一样。是的，有一种方法可以检查类似的问题：T汉克斯先生！我想我会选择第二个选项：-背景：-webkit线性渐变（45度，白色5%，红色5%，红色90%，白色90%）；背景：-o-线性渐变（45度，白色5%，红色5%，红色90%，白色90%）；背景：-moz线性渐变（45度，白色5%，红色5%，红色90%，白色90%）；背景：线性渐变（45度，白色5%，红色5%，红色90%，白色90%）；更易于处理响应性设计。@skycrew:是的，我也更喜欢这个选项，原因完全相同：）在@Harry之间我如何向div添加边框？@skycrew:可以添加边框，但这始终适用于整个框（矩形）。假设我想要一个顶部边框（包括右上方）和底部边框（包括左下角），所以我需要使用第一个选项？

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