Notice
Recent Posts
Recent Comments
Link
- Arawn's Dev Blog
- Outsider's Dev Story
- Toby's Epril
- Benelog
- NHN 개발자 블로그
- SK 플래닛 기술 블로그
- OLC CENTER
- 소프트웨어 경영/공학 블로그
- 모바일 컨버전스
- KOSR - Korea Operating System …
- 넥스트리 블로그
- 리버스코어 ReverseCore
- SLiPP
- 개발자를 위하여... (Nextree 임병인 수석)
- "트위터 부트스트랩: 디자이너도 놀라워할 매끈하고 직관…
- Learning English - The English…
- real-english.com
- 'DataScience/Deep Learning' 카테…
- Deep Learning Summer School, M…
- Deep Learning Courses
민서네집
css로 속이 빈 역삼각형 만들기 본문
[참고] http://stackoverflow.com/questions/18606253/how-to-create-hollow-triangle-in-css
[Test] http://jsfiddle.net/wmDNr/3/
.triangle {
position: relative;
margin-top: 0;
margin-right: 20px;
width: 24px;
height: 23px;
display: inline-block;
}
.triangle>div {
width: 24px;
height: 2px;
background: #91c741;
}
.triangle>div:before {
content: " ";
display: block;
width: 24px;
height: 2px;
background: #91c741;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
position: absolute;
top: 10px;
right: -6px;
}
.triangle>div:after {
content: " ";
display: block;
width: 24px;
height: 2px;
background: #91c741;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
position: absolute;
top: 10px;
left: -6px;
}
'WEB (HTML, CSS)' 카테고리의 다른 글
| IE(Internet Explorer)의 호환성 문제 해결 (0) | 2014.12.12 |
|---|---|
| jQuery Ajax IE8,9 Cross Domain Security Issue (0) | 2014.12.09 |
| Fluid width with equally spaced DIVs (0) | 2014.11.19 |
| 개인정보취급방침 회원가입약관 만들기를 도와주는 웹사이트 소개 (0) | 2014.10.31 |
| Gradation CSS 만들어주는 사이트 (1) | 2014.10.22 |
Comments