댓글 검색 목록

[css] CSS 목록 삼각형 볼릿만들기

페이지 정보

작성자 운영자 작성일 15-04-29 13:09 조회 2,357 댓글 0

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 

댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.