html - 一维不变的 CSS 三 Angular 形

Question

我经常使用 CSS 边框箭头，但我不知道用它们是否可以实现我想要的效果，所以我走了另一条路，改用了伪元素。我知道我的解决方案依赖于三 Angular 学，但仍然不知道如何实现它。

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

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

这意味着以数学控制的方式改变变换 Angular :

.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;}