CSS三角形+“之后”实施 [英] CSS Triangle + "After" Implementation

问题描述

我试图用CSS创建一个三角形，它看起来不错，但我现在有一个问题在一个框后实现它。

I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.

查看我的示例和您会看到我的意思：

Check out my example and you will see what I mean:

http://jsfiddle.net/TTVuS/

看起来像 .box 后的三角形被截断，我完全不知道为什么会发生这种情况。

It seems like the triangle after .box gets "cut off" and I have absolutely no idea why this happens.

我想让它看起来像 .arrow 。

我试图改变盒子，三角形等的尺寸，但没有什么工作。

I have tried to change dimensions of the box, the triangle etc. but nothing worked.

ps这里是css如果Jsfiddle是缓慢或不再可用：

p.s. here is the css in case Jsfiddle is slow or not available again:

.box{
    background:red;
    height:40px;
    width:100px;
}

/*the triangle but its being cut off*/
.box:after{
    content:"";
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

/*the triangle how it should look like*/
.arrow{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

推荐答案

将三角形更改为 position：absolute; 并将 position：relative; 添加到 .box 修正它。它似乎是继承了盒子的高度。

Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.

这篇关于CSS三角形+“之后”实施的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！