CSS - 스타일시트에 관한 자료모음 게시판입니다. - CSS에 관한 위키백과

CSS로 삼각형 만들기

조회 수 15391 추천 수 0 2010.02.27 21:59:10

http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/


위의 방식으로 삼각형을 준 것이 메뉴에 손을 올리면 아래 뜨는 놈 상단에 붙어있는 것이다.

라파엘로 그리려고도 했으나 이게 좀 더 좋은 듯 함. 


참고로 위에서 삼각형을 추가한 방식은 다음과 같다.


$('#nav ul li:first-child').prepend('<div class="triangle"></div>');


.triangle {
    border-color: transparent transparent #000 transparent;
    border-style: solid;
    border-width: 0px 7px 7px 7px;
    height: 0px;
    width: 0px;
    position:absolute;
    left:58px;
    margin-top:-11px;
}

List of Articles
번호 제목 글쓴이 날짜 조회 수

Implementing Responsive Design 정리

  • Nes
  • 2012-11-22
  • 조회 수 5314

Chapter 2 : Fluid Layoutsem은 px과 다르게 cascade가 된다. rem(root em)도 고려해봐라. fluid layout 좋다. 주로 가로폭은 %로 세로 padding은 em으로 셋팅 fluid layout에서 어떤 요소만 따로 고정 가로폭이 필요할 때는 d...

페이지로딩이 끝나면 css 트랜지션이 일나게 하기 [6]

  • Nes
  • 2012-06-01
  • 조회 수 6262

http://css-tricks.com/transitions-only-after-page-load/

구글 CSS3 버튼 스타일

  • Nes
  • 2012-05-30
  • 조회 수 5900

http://todc.github.com/css3-google-buttons/

최근에 나온 슬라이더 중 상당히 쓸만한 슬라이더

  • Nes
  • 2012-05-15
  • 조회 수 5904

http://alexdunphy.github.com/refineslide/

쓸만한 CSS3 3D 이펙트 효과

  • Nes
  • 2012-05-15
  • 조회 수 5793

http://webstuffshare.com/demo/CubeInformation/index.html

물에 비친듯한 효과를 내주는 CSS3

  • Nes
  • 2012-05-15
  • 조회 수 5829

http://jsfiddle.net/ShockFamily/Mdm9x/light/

★★★★★ 스크롤 효과의 지존 [1]

  • Nes
  • 2012-04-20
  • 조회 수 5688

http://lab.hakim.se/scroll-effects/

택스트 to 이미지 치환시 text-indetn:-9999px 을 대체할 수 있는 방법 [1]

  • Nes
  • 2012-04-20
  • 조회 수 5552

http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html#h202

javascript로 style을 변경할 때 왜 하이픈(-)을 쓰지 못하는가에 관한 설명

  • Nes
  • 2012-03-13
  • 조회 수 6123

간단하다. 자바스크립트에서는 hyphen이 마이너스 연산자로 해석되기 때문이다!ㅋ 하여 이를 피하기 위해 Camel방식을 사용한다. 또한 위와 비슷한 이유로 float는 자바스크립트에서 reserved word 이기 때문에 앞에 prefix로 cs...

css display와 visibility의 차이 [1]

  • Nes
  • 2012-03-13
  • 조회 수 5697

visibility는 hidden일 경우에도 공간은 그대로 차지한다. 하지만 display가 none으로 지정될 경우에는 차지했던 그 공간 자체도 없어진다. visiblity와 display가 position이 absolute나 fixed일 경우에는 같은 효과를 낼 수 ...

css에서 엘리먼트의 width와 height를 지정하는 또 다른 방법

  • Nes
  • 2012-03-12
  • 조회 수 5769

기본적으로 element에 width와 height를 주어서 width와 height를 지정하는 방법 말고 position 값을 absolute나 fixed를 준 상태에서 left, right, top, bottom 값을 조정하여 크기를 설정할 수 있다. 하지만 이들 값을 ...

CSS 퍼포먼스 향상을 위한 문서 자료 [1]

  • Nes
  • 2012-01-16
  • 조회 수 5994

http://www.html5rocks.com/en/tutorials/speed/html5/

Responsible Table

  • Nes
  • 2012-01-12
  • 조회 수 6253

http://css-tricks.com/examples/ResponsiveTables/responsive.php

CSS3 성능 및 프로파일링에 관한 좋은 글

  • Nes
  • 2012-01-12
  • 조회 수 5910

http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/

어도비에서 CSS3와 HTML5를 제대로 보여주는 사이트를 맹금ㅋ

  • Nes
  • 2011-12-19
  • 조회 수 5325

http://beta.theexpressiveweb.com

이미지가 아닌 CSS3 만으로 만들어진 패턴 갤러리

  • Nes
  • 2011-12-01
  • 조회 수 5595

http://lea.verou.me/css3patterns/# CSS3 패턴 생성기 - http://www.patternify.com/

아이폰 및 안드로이드 웹킷 브라우저에서 회전시 폰트크기 변경 막기 [8]

  • Nes
  • 2011-11-23
  • 조회 수 7368

html { -webkit-text-size-adjust: none; }

css3 에니메이션의 진수! [1]

  • Nes
  • 2011-10-05
  • 조회 수 5560

http://www.zurb.com/playground/css-boxshadow-experiments

CSS3에서 text-shadow를 멀티로 줄 수 있다는 걸 잊지 말기

  • Nes
  • 2011-09-30
  • 조회 수 5856

http://beercamp.com/2010/ 또한 border-radius와 box-shadow로 음영까지 표현할 수 있음.

CSS 셀렉터 :target 의 활용법

  • Nes
  • 2011-09-27
  • 조회 수 5916

http://coliss.com/articles/build-websites/operation/css/css3-tutorial-yellow-fade-by-snook.html

CSS 레아아웃의 미래 [1]

  • Nes
  • 2011-08-29
  • 조회 수 5781

http://www.netmagazine.com/features/future-css-layouts 앞으로 적용될 CSS3 기반의 레아아웃에 관한 내용~ 굿

구성이 잘된 CSS / HTML 프레임워크 Bootstrap [1]

  • Nes
  • 2011-08-29
  • 조회 수 6921

http://twitter.github.com/bootstrap/

이유는 모르겠지만 a:visited:before && a:visited:after 가 먹지를 않는다.

  • Nes
  • 2011-06-07
  • 조회 수 7296

무슨 이유일까 css trick 같은 곳에서도 예제로 두고 있는 속성 정의인데... visited를 빼면 잘 먹는데... http://css-tricks.com/css-content/ 거참 희안하다..

CSS3 트랜지션 적용시 엥간한 브라우저는 심각하게 느려진다. [2]

  • Nes
  • 2011-06-01
  • 조회 수 7591

-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -transition: all 0.2s ease-in-out; 심지어 파폭4, 크롬8이상의 버전이라도 전체적인 성능에 저하가 눈으로...

쓸만한 CSS3 택스트 이팩트 효과 imagefile

  • Nes
  • 2011-05-23
  • 조회 수 8324

http://lab.simurai.com/css/glass/ glass 효과 http://www.ejhansel.com/transform/ 택스트 트랜스폼 효과 http://trentwalton.com/2010/04/06/css3-background-clip-font-face/ http://trentwalton.com/css3/type/ CSS 백그라운드 클립효과 http:...


Login

Nes Side Banners

jquery

jQuery

jQuery.com 으로 이동합니다~!!

ajaxrain

Ajaxrain

ajaxrain.com 으로 이동합니다~!!

queness

Queness

queness.com 으로 이동합니다~!!

Google Search

Counter

오늘 :
431
어제 :
465
전체 :
1,017,433