Html 旋转元素时，div中带有透明背景的非预期灰线

将旋转添加到图片中的div时，会出现此灰线。如果不变换（旋转）它，就不会发生这种情况。我怎样才能摆脱这条灰线？背景和边框应该是透明的。元素是可旋转的，因此我需要这个css属性

.bow{
位置：绝对位置；
宽度：30px；
高度：30px；
边框顶部：3件黑色纯色；
边框右上半径：50px；/*100px高度+10px边框*/
边框左上半径：0；
边框右下半径：0；
背景色：透明；
盒影：3px0黑色；
变换：旋转（20度）；
边界底部：0；
右边界：0；
}

---

考虑删除框阴影

.bow{
位置：绝对位置；
宽度：30px；
高度：30px；
边框顶部：3件黑色纯色；
边框右上半径：50px；/*100px高度+10px边框*/
边框左上半径：0；
边框右下半径：0；
背景色：透明；
/*盒影：3px0黑色*/
变换：旋转（20度）；
边界底部：0；
右边界：0；
}

---

看起来是

框影

导致了这里的问题。如果删除该属性并同时添加一个

右边框

属性（与

边框顶部

的值相同），则可以获得相同的外观，而不需要额外的灰线：

.bow{
位置：绝对位置；
宽度：30px；
高度：30px；
边框顶部：3件黑色纯色；
右边框：3px黑色实心；
边框右上半径：50px；/*100px高度+10px边框*/
背景色：透明；
变换：旋转（20度）；
}

.bow{
位置：绝对位置；
宽度：30px；
高度：30px；
边框顶部：3件黑色纯色；
右边框：3px黑色实心；
边框右上角半径：50px；
背景色：透明；
变换：旋转（20度）；
边框底部：无；
}

回答不错，但高度宽度应为30px，我已将其更改为与图像匹配，OP最初显示的更多是一个“圆形框”，而不是四分之一圆，但该值可以轻松调整以获得他们想要的外观。非常感谢这是一个建议！原则上，这是可行的。但是这个解决方案面临的问题是，我使用dom-to-image.js来渲染可以移动、旋转等元素的图片（github.com/tsayen/dom-to-image）。将这些元素保存为具有dom to image的图像后，它们看起来会有所不同。它们看起来就像下面《财富》杂志埃雷库罗（Erekuro）所建议的那样。有了阴影，它就成功了（我不知道为什么）。这个问题只发生在Firefox中。您是否知道如何通过保持阴影来删除线，或者渲染这些对象的问题在哪里？谢谢！请使用这些详细信息编辑您的问题。另外，请在图片中加入一个include

dom

，这样我们就可以看到这一点了。根据您当前的示例，显示的

框阴影

是渲染的问题，因此我不确定是否有方法获得该属性并使其看起来像您描述的那样。非常感谢这是一个建议！原则上，这是可行的。但是这个解决方案面临的问题是，我使用dom-to-image.js来渲染可以移动、旋转等元素的图片（）。将这些元素保存为具有dom to image的图像后，它们看起来会有所不同。有了阴影，它就成功了（我不知道为什么）。您是否知道如何通过保持阴影来删除线，或者渲染这些对象的问题在哪里？谢谢！谢谢！我是否可以通过某种方式调整它，使其具有与上述建议相同的“端点”，但使用不同的解决方案？我面临的问题是，我使用dom-to-image.js来渲染可以移动、旋转等元素的图片（）。上面Argiris建议的元素在将它们保存为具有dom to image的图像后看起来有所不同。有了阴影，它就成功了（我不知道为什么）。你的工作，但我希望有类似的'目的'。有什么想法吗？谢谢！