CSS：如何在div右侧添加斜边，以实现完全的浏览器交叉兼容性？

我希望在我的div上实现一个倾斜的边缘。我遇到的问题是，我发现实现这一点的简单代码不兼容跨浏览器。事实上，它只在Chrome中显示

任何人都可以建议如何在所有浏览器中执行以下操作：

clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);

这一效果将实现：

以下是我的全部CSS代码：

.my-slanted-div {
    position:absolute;
    bottom:0;
    left:0;
    width:100px;
    padding:10px 10px;
    background-color:#eee;
    font-size:20px;
    clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}

---

有人能帮我吗？

使用css可以生成三角形形状的元素。 Css技巧对这一点有很大的影响

通过使

.slided

类自身相对定位，我们可以使用绝对定位将生成的内容定位在slided div的右侧。 要想得到你想要的完美结果需要一些技巧，但这里有一个例子

。倾斜{
背景：#007bff；
颜色：#fff；
位置：相对位置；
显示：内联块；
字体大小：20px；
高度：25px；
填充物：2px4px；
}
倾斜的，倾斜的{
内容：“；
显示：块；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：29px 0 20px；
边框颜色：透明#007bff；
位置：绝对位置；
排名：0；
右：-20px；
}

---

Hello

它很可能是一个SVG，可以缩放以始终适合其文本，这是一种简单快捷的方式；如果您必须使用CSS，那么您可以始终：

• 将渐变设置为从“颜色”到“透明”的div，以便它占据大部分div，并且颜色的过渡是突然的，不像正常渐变那样平滑

• 创建另一个div并使用边框创建一个三角形以接触另一个主矩形div，例如：

  .triangle{
  宽度：0；
  身高：0；
  边框样式：实心；
  边框宽度：200px 200px 0；
  边框颜色：#fff透明；
  }

---

这应该可以使用边框实现

<div id="container">
  <p id="text">Hello</p>
  <div id="slanted"></div>
</div>

#container {
  position: relative;
  height: 200px;
  width: 200px;
  background:url(http://placehold.it/200x200);
}

#text {
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: 1;
  margin: 0;
}

#slanted {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 0;
  border-left: 75px solid #dedede;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #dedede;
}

您好
#容器{
位置：相对位置；
高度：200px；
宽度：200px；
背景：url(http://placehold.it/200x200);
}
#正文{
位置：绝对位置；
底部：15px；
左：10px；
z指数：1；
保证金：0；
}
#倾斜的{
位置：绝对位置；
底部：0；
左：0；
身高：0；
宽度：0；
左边框：75px实心#dedede；
右边框：50px实心透明；
边框底部：50px实心#dedede；
}

---

您还可以扭曲伪元素，如下所示：

。我的倾斜div{
位置：绝对位置；
底部：40px；
左：0；
宽度：80px；
填充：10px 10px；
背景色：红色；
字体大小：20px；
}
.我的斜体跳水运动员：之后{
宽度：50px；
背景：红色；
位置：绝对位置；
身高：100%；
内容：''；
右：-22px；
排名：0；
变换：倾斜（45度）；
}

文本

我让它以一种方式工作：before和：after pseudos，您只需更新宽度、高度和线条高度，以适应所需选项卡的大小；矩形的高度必须与：before和：after位的高度相同，以保持外观整洁

.box{
背景：红色；
宽度：200px；
位置：相对位置；
高度：100px；
线高：100px；
文本对齐：居中；
左边距：50像素；
颜色：白色；
字号：21px；
字体系列：arial，无衬线；
}
.盒子：之后{
位置：绝对位置；
右：-50px；
内容：''；
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：100px纯红；
}
.盒子：以前{
位置：绝对位置；
左：-50px；
内容：''；
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：100px纯红；
}

框中的文本

这里有一种转换方法：旋转以添加到列表中。非常烦人，因为你将不得不使用像素进行对齐，并在@media规则中为不同的屏幕大小输入一些条目。但它应该是相当跨浏览器友好的（但可能不是opera mini）

正文{
背景色：#333；
}
.集装箱{
位置：绝对；/*需要一个位置，相对就可以了*/
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
高度：200px；
背景色：#ccc；
溢出：隐藏；/*必需*/
}
.问候{
位置：绝对位置；
底部：0；
左：0；
填充：0 10px 0 15px；
背景色：#fcfc；
高度：50px；
行高：50px；/*将高度与垂直居中文本匹配*/
字体大小：30px；
}
在…之前{
内容：''；
位置：绝对位置；
顶部：21px；/*使用此按钮进行校准*/
右：-36px；/*使用此按钮进行校准*/
高度：40px；宽度：70px；/*可能需要根据容器大小进行调整*/
背景色：#fcfc；
变换：旋转（60度）；/*以调整角度*/
z-index:-1；/*将伪元素：：放在下面的前面。问候语*/
}

你好

也许您可以尝试在右侧放置一个三角形。您可以使用“边框宽度”技巧，也可以使用设置成一定角度的背景图像渐变。@sniels您不一定是指图像，对吗？使用css@Terry听起来都是不错的选择，但是你能举一些例子吗？下面是一个使用

：after

生成三角形的方法来生成内容的例子。这个方法非常有效，尽管当你把文本放在里面时，它的位置不好。如果你能解决这个问题，我认为你的方法会更好。哇，这真是太棒了。@sniels是的，这是这种方法的一个限制，但是如果你知道它的大小，你总是可以绝对定位它（甚至相对于父对象移动它）。我已经更新了示例这对我来说很有效，但未来一个巨大的好处是有一个解决方案（即使是这个），并且能够将阴影集成到倾斜的

div中，这是一个很好的解决方案。虽然在某些情况下，文本可能会被倾斜的div隐藏。@s