Question

我正在使用CSS代码来获得应该很容易的东西：在同一页上多个div的底部添加一个三角形。

这是我正在使用的代码：

.areatitolo {
    background-color: #bb0000;
    color: #fff;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    padding:5%;
    margin-top:100px;
    width:100%;
    margin-bottom:60px;
}

.areatitolo:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #bb0000;
    border-left: solid 100px transparent;
    border-right: solid 100px transparent;
}

除了只有第一个有效并且我需要使用相同的效果3次以外，应该没有任何问题。你知道我在哪里弄错了吗？

https://jsfiddle.net/federico_feroldi/0zrfL4q1/4/

谢谢您的帮助。

Answer 1

将position: relative;添加到.areatitolo。

Answer 2

您应该使用position：相对于类.areatitolo的位置，因为您对:: after使用了绝对值。每当您对子元素使用绝对位置时，如果不是绝对子元素，默认情况下应使用相对于父元素的位置，因此默认情况下，第一个三角形出现在顶部，所有其他三角形都重叠在顶部

Answer 3

要完全定位子元素，父元素必须具有position: relative;属性。这为孩子的定位提供了参考点。

另外，考虑使用::after代替:after以获得更现代的CSS3语法。 See MDN for more information.

div底部带有三角形的多重框

3 个答案: