时间戳

首页 > 解决方案 > 旋转元素时，具有透明背景的 div 中出现意外的灰线

html - 旋转元素时，具有透明背景的 div 中出现意外的灰线

问题描述

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

.bow {
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: 3px black solid;
    border-top-right-radius: 50px;  /* 100px of height + 10px of border */
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent;
    box-shadow: 3px 0 0 0 black;
    transform: rotate(20deg);
    border-bottom: 0;
    border-right:0;
}
<div class="bow"></div>

标签： htmlcss

解决方案

看起来box-shadow这里是造成问题的原因。如果您删除它并添加一个border-right属性（与 相同的值border-top），您可以获得相同的外观，而无需额外的灰线：

.bow {
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: 3px black solid;
    border-right: 3px black solid;
    border-top-right-radius: 50px;  /* 100px of height + 10px of border */
    background-color: transparent;
    transform: rotate(20deg);
}
<div class="bow"></div>

推荐阅读