민서네집

css로 속이 빈 역삼각형 만들기 본문

WEB (HTML, CSS)

css로 속이 빈 역삼각형 만들기

브라이언7 2014. 11. 21. 22:49

[참고] 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;
}


Comments