变换和边框权限样式在Safari中不起作用

Question

我一直在为大写字母D创建边框。为此，我尝试创建一个转换后的圆圈并使用border-right，但在Safari上，这将显示整个圆圈的边框。当div没有被转换时它工作正常，但我真的希望div被旋转。我该如何解决这个问题？

＆＃13;

＆＃13;

.circle {
    height: 130px;
    width: 130px;
    background: none;
    position: absolute;
    border-radius: 100px;
    border-right: 3px solid blue;
    left: 140px;
    top: 134px;
    transform: rotate(-45deg)
}
.letter {
    height: 100px;
    width: 100px;
    position: absolute;
    color: gray;
    left: 95px;
    top: 120px;
    font-size: 200px;
    transform: rotate(-45deg);
}

＆＃13;

<div class="letter">D</div>
<div class="circle"></div>

＆＃13;

＆＃13;

＆＃13;