CSS CSS三角形+“之后”实现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8327424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Triangle + "After" Implementation
提问by r0skar
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.
我试图用 CSS 创建一个三角形，它看起来不错，但是我现在在一个盒子之后实现它时遇到了问题。
Check out my example and you will see what I mean:
看看我的例子，你就会明白我的意思：
It seems like the triangle after .boxgets "cut off" and I have absolutely no idea why this happens.
看起来像.box“切断”之后的三角形，我完全不知道为什么会发生这种情况。
I want it to look like .arrow.
我希望它看起来像.arrow.
I have tried to change dimensions of the box, the triangle etc. but nothing worked.
我试图改变盒子、三角形等的尺寸，但没有任何效果。
p.s. here is the css in case Jsfiddle is slow or not available again:
ps 这里是 css，以防 Jsfiddle 运行缓慢或不再可用：
.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;
}
采纳答案by Nate B
Changing the triangle to position: absolute;and adding position: relative;to the .boxfixes it. It seems to be inheriting the height of the box.
将三角形更改为position: absolute;并添加position: relative;到.box修复它。它似乎是在继承盒子的高度。
回答by Ivan4166
if you want to do this!
如果你想要做这个！
insert an div class arrow in the div class box may be the only solution.
在 div 类框中插入一个 div 类箭头可能是唯一的解决方案。
html{
padding:50px
}
.box{
position : relative;
background:red;
height:40px;
width:100px;
border : 0px;
}
/*
.box:after{
position : relative;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}<div class="box">
<div class="arrow">
</div>
</div>
<br><br><br>
<div class="arrow">
</div>