div와 같은 facebook을 만드는 데 문제가 있습니다. 상단에 삼각형이 있습니다.

Question

좋아하는 사람이 있으면 그 사람이 좋아하는 사람을 보여주는 팝업이 나타납니다. 누구든지 CSS에서 div를 모방하고 내가 어떻게 할 수 있는지 설명 할 수 있는지 궁금합니다. 내가 의미하는 바를 보여주는 아래 그림이있다. 나는 당신이 CSS를 사용해야만한다는 것을 알고 있지만 삼각형과 모든 것을 어떻게 배치 할 지 모르겠다. 당신이 그것의 요점이 아래로가 붙여

#pointed { 
position: relative; 
margin: 0 auto; 
width: 200px; 
height: 200px; 
background-color: white; 
} 

#pointed:after, 
#pointed::after { 
position: absolute; 
top: 100%; 
left: 50%; 
margin-left: -50%; 
content: ''; 
width: 0; 
height: 0; 
border-top: solid 150px red; 
border-left: solid 100px transparent; 
border-right: solid 100px transparent; 
} 

Answer 1

코드 : 여기

내가 다른 곳에서 발견 된 일부 코드입니다. working JSFiddle here을 볼 수 있습니다.

이 문제에는 두 부분이 있다고 생각합니다. 첫 번째 부분은 이며 삼각형은입니다. 두 번째 부분은 이며 삼각형은입니다. 삼각형

pseudoelement의 국경을 만들기

우리가보고있는 그 삼각형에 대한 책임이 있습니다. 그것이 어떻게 일어나는지 확실하지 않다면, 아주 잘 설명하는 this great answer을 살펴보십시오.

위치는 삼각

위치 결정의 핵심은 아이가 부모의 바깥에 표시하고이 포함됩니다. 우리는 어린이에게 absolute을 위치시킴으로써 이것을 할 수 있습니다. 그러나 부모를 전혀 변경하지 않고이 작업을 수행하면 absolute 위치 지정이 창에 상대적으로 설정됩니다.

여기서 원하는 것은 부모를 기준으로 자녀를 배치하는 것입니다. 부모 요소의 위치를 ​​기본값 인 static 이외의 값으로 설정하면됩니다. 붙여 넣은 코드에서이 코드를 relative으로 설정 한 것을 볼 수 있습니다. 위치 지정에 대한 자세한 내용은 working docs을 참조하십시오. 다른 유용한 리소스는 CSS Tricks입니다.

어쨌든 우리는 우리 아이가 부모가 아닌 인 단지이되기를 바랍니다. 이것은 당신이 JSFiddle 위에서 볼 수있는 것처럼, 그 상단에 부착 된 것처럼 보이게됩니다

position: absolute; 
top: -5px; 

: 우리는 5px 높은 삼각형이있는 경우 이에 따라, 위치에 대한 자녀의 CSS처럼 보일 것이다.

원하는 방향으로 수직으로 배치 한 후 left 위치를 설정하여 수평으로 원하는 위치로 가져옵니다.

물론 바퀴를 다시 발명 할 가치가 있는지 궁금한 점이 있으십니까? — 툴팁에는 Bootstrap Jquery이 붙어 있습니다.