포럼
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
![깍쇠.png](http://www.xpressengine.com/files/attach/images/19778968/948/489/022/4f0c8ee0c92ad354e83ecf6a0ce479cd.png)
css border 꺽쇠? > ? 모양? 내는방법이 궁금해요
2013.12.07 16:14
http://www.hyundai.com/kr/index.do
여기 현대자x차 같은 메뉴를 보면 border 로 줄 값 중간에 저렇게 세모꺽쇠? 모양을 줬는데 어떻게 하는지 모르겠어요
방법을 가르쳐주시면 감사하겠습니다.
좀 검색해서 해봤는데.
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid red;
이값을 주면 세모모양이 나오기는 하는데, 이미지처럼 줄이 일찍선으로 내려오다 중간에 한번 꺽이고 다시 일직선으로 내려가는모양을 내보려구요. ㅠㅠ
아시는분 계실까요
![깍쇠.png](http://www.xpressengine.com/files/attach/images/19778968/948/489/022/4f0c8ee0c92ad354e83ecf6a0ce479cd.png)
댓글 13
-
퍼니엑스이
2013.12.07 16:40
-
아싸로또1등맞고싶어
2013.12.07 17:22
아? 진짜요? 크롬에서 요소검사해서 다운받아서 쓰면 불법일까요?
-
퍼니엑스이
2013.12.07 18:06
다운받아서 쓴다해도 아무도 모릅니다. 이런 이미지는 흔한 이미지라 함부로 자기가 만들었다고 주장하기도 힘들죠.
-
Lansi
2013.12.07 16:48
CSS 말풍선 만들기 찾아보시면 도움이 되실 겁니다.
-
아싸로또1등맞고싶어
2013.12.07 17:22
우아 ㅡ.ㅡ 이런것도 있네요
css 활용도는 끝이없네요
-
위 사이트는 이미지로 넣은거 같은데, CSS만으로도 할 수 있습니다. ^^
http://www.xpressengine.com/index.php?mid=download&package_srl=22488105 여기 메뉴에 있는 것처럼 말이죠 ㅎㅎ
http://jsfiddle.net/7BYBv/ 이런식으로 하시면 됩니다. ^^
-
아싸로또1등맞고싶어
2013.12.07 17:23
우아대박이네요
저는 이거 한번 만들어보려고 몇번이나 몇시간이나 투자해서 안되서 이렇게 질문드린건데 ㅠㅠ
.. 역시 XE에 계시는분들은 차원이 다르셔요
-
와우, 신기하네요.
-
역시.. 웹엔진짱...
-
KrteamENT
2013.12.10 07:03
웹엔진 짱짱맨..
어디선가 엄청난 정보를.. -
서기에요
2013.12.08 12:10
개인적인 생각으로는
모양 만든다고 불필요한 마크업을 하기 보다는
이미지가 들어가야 할곳은 이미지를 써야 한다고 생각합니다..
-
아싸로또1등맞고싶어
2013.12.08 16:57
맞는말씀이기도 합니다.
그치만 ㅠㅠ 알고싶어서.. 단지.. ㅠㅠ
-
서기에요
2013.12.08 18:04
호기심은 소중한겁니다!! ㅎㅎ
CSS 보니까 그냥 삼각형 모양을 이미지로 만들어서 넣은거네요.