纯CSS标记div，带圆角三角形指针

我希望创建一个购物标签形状的div，已经做得相当远了，但我想通过在三角形指针的峰值处和混合到标签之前将其四舍五入，使其达到像素级的完美

更详细的信息：

如果需要，请选择此处的圆角类型：

如果我能在某处得到小白点（我尝试了内容：·“运气不好”）

我在圆角三角形上查找了stackoverflow项，所以这似乎是可行的，但它们都是独立的三角形，没有添加到div的末尾。我正在尝试在矩形div旁边创建一个独立的三角形

谢谢你的建议

.tag{
背景色：红色；
边界半径：0 3px 3px 0；
颜色：#fff；
显示：内联块；
字体系列：verdana；
字体大小：12px；
高度：自动；
线高：12px；
左边距：9px；
填充：3px 6px 3px 3px；
位置：相对位置；
}
.标签：之前{
内容：“；
线高：6px；
位置：绝对位置；
宽度：0；
身高：0；
边框顶部：9px实心透明；
边框底部：9px实心透明；
右边框：9px实心#f00；
排名：0；
左：-9px；
}

---

hello

您可以对形状使用

clip path

，对圆角使用SVG过滤器（调整

stdDeviation

以控制半径），对点使用渐变色：

.box{
显示：内联块；
过滤器：url（“#goo”）；
}
.包厢部{
利润率：10px；
填充：20px40px20px20px；
字体大小：35px；
字体大小：粗体；
字体系列：无衬线；
颜色：#fff；
变换原点：右中心；
变换：旋转（-45度）；
背景：
径向梯度（计算时为8px（100%-20px）50%，#fff 99%，透明），/*点*/
线性渐变（60度，红色，橙色）；/*渐变着色*/
剪辑路径：多边形（0 0，计算（100%-30px）0，100%50%，计算（100%-30px）100%，0 100%）；
}

出售

基于Temani上面的回答，我开始思考：before的背景和旋转，以及剪辑：before元素的能力。所以，我只是在它前面放一个盒子，给它一些边界半径，把它旋转成一个菱形，然后把它正确地放在我的标签上。哇

我也可以使用剪辑路径删除钻石的右侧，但在我的情况下，我没有必要

.tag{
背景色：红色；
边界半径：0 3px 3px 0；
颜色：#fff；
显示：内联块；
字体系列：verdana；
字体大小：12px；
字体大小：300；
高度：自动；
线高：12px；
左边距：15px；
填充：5px 6px 3px 12px；
位置：相对位置；
}
.标签：之前{
背景：红色径向梯度（8px 50%时为2px，#fff 99%，透明）；
内容：“；
高度：16px；
宽度：16px；
位置：绝对位置；
边界半径：4px 3px；
顶部：2个；
变换：旋转（45度）；
左：-7px；
}

---

Hello

Wow了不起的工作@Temani！任何我应该注意的现代跨浏览器问题？@daprezjer only IE会像往常一样失败，对于其他人来说没有问题。谢谢，我会尝试一下并给予表扬。我真的不需要屏幕的旋转和渐变，只需要圆角的三角形边缘，但我猜我能猜出来。进入模糊矩阵是越来越疯狂，但似乎真的很酷！我很惊讶没有比这更令人兴奋的方法了，然而，考虑到三角形可以自己制作：但也许这是只有一个div的唯一方法。