분류 css

CSS 목록 삼각형 볼릿만들기

컨텐츠 정보

  • 조회 1,586 (작성일 )

본문

CSS로 삼각형 목록 볼릿 만들기 예제입니다.

 

CSS :

ul {

    margin: 0.75em 0;

    padding: 0 1em;

    list-style: none;

}

li:before { 

    content: "";

    border-color: transparent #111;

    border-style: solid;

    border-width: 0.35em 0 0.35em 0.45em;

    display: block;

    height: 0;

    width: 0;

    left: -1em;

    top: 0.9em;

    position: relative;

 

HTML :

​<ul>

<li><a href="http://365ok.co.kr/"><span>Home</span></a></li>

<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=eduhtml"><span>HTML</span></a></li>

<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=educss"><span>CSS</span></a></li>

<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edujavascript"><span>JavaScript</span></a></li>

<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edujquery"><span>jQuery</span></a></li>

<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edubootstrap"><span>Bootstrap</span></a></li>

</ul> 

 

미리보기 : 

http://365ok.co.kr/dn/css/tribullet.html 

css