Question

我经常使用CSS边框箭头，但我不知道我想要实现的是什么，所以我去了另一条路线并使用了伪元素。我知道我的解决方案依赖于三角函数，但仍然不知道如何实现它。

无论我的.front div的高度如何，我都需要能够保持7PX的宽度，从而允许灵活的高度和固定的宽度：

.front{
    height: 20px;
    **width: 7px;**
    background-color: darkred;
    position: relative;
}

这意味着以数学方式控制方式改变变换角度：

.front:after{
    content: " ";
    height: 30px;
    width: 15px;
    background-color: lightgreen;    
    position: absolute;
    top:0;
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);

}

有没有更简单的方法来实现这一目标？图像显然是不可能的，因为像素化......

JsFiddle here。

Answer 1

这是你的fiddle with a triangle in the top right corner完全由CSS制作的。我确定动画它只是调整两个边框宽度的问题。

#top_rt_tri {
    position:absolute; top:0px;right:0px;width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 60px 60px;
    border-color: transparent transparent #007bff transparent;}

具有一个常量维度的CSS三角形

1 个答案: