CODEWITHSUNDEEP
htmlcss
Federico Feroldi
Federico Feroldi

Reputation: 35

Multiple box with triangle on bottom of div

I'm fighting with css code to obtain something that should be pretty easy: adding a triangle at the bottom of multiple div on the same page.

Here it's the code I'm working with:

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

There shouldn't be any problem, apart from the fact that only the first one works and I need to use the same effect 3 times... Do you know where I made the mistake?

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

Thank you for your help.

Upvotes: 0

Views: 78

Answers (3)

SeanMcP
SeanMcP

Reputation: 293

For a child element to be absolutely positioned, the parent must have a position: relative; property applied to it. This gives the child a reference point for it's positioning.

Additionally, consider using ::after instead of :after for a more modern CSS3 syntax. See MDN for more information.

Upvotes: 0

Faizal Hussain
Faizal Hussain

Reputation: 1581

you should use position :relative to the class .areatitolo .Because you have used absolute for ::after. whenever you use position absolute to a child element ,you should use position relative to parent if not the absolute child will take body as relative parent by default ,thats why the first triangle appears at the top all the other triangles get overlaped on top

Upvotes: 0

Mike
Mike

Reputation: 184

Add position: relative; to .areatitolo.

Upvotes: 2

Related Questions