html - 具有一个恒定维度的 CSS 三角形

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在这里。

Answer 1

这是您在右上角使用纯 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;}