我正在使用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/
谢谢您的帮助。
答案 0 :(得分:2)
将position: relative;
添加到.areatitolo
。
答案 1 :(得分:0)
您应该使用position:相对于类.areatitolo的位置,因为您对:: after使用了绝对值。每当您对子元素使用绝对位置时,如果不是绝对子元素,默认情况下应使用相对于父元素的位置,因此默认情况下,第一个三角形出现在顶部,所有其他三角形都重叠在顶部>
答案 2 :(得分:0)
要完全定位子元素,父元素必须具有position: relative;
属性。这为孩子的定位提供了参考点。
另外,考虑使用::after
代替:after
以获得更现代的CSS3语法。 See MDN for more information.