https://jsfiddle.net/18yL94L2/
북마크 모양의 버튼을 만들려고 하는데요
css 도형싸이트에서 구한거라 화살표가 위로 가있는데
아래로 사진처럼 하려면 어떻게 해야될까여?
더불어 제가 border:1px solid #000
보더를 넣으려고 하는데
삼각형은 보더가 안넣어지더라고요
https://jsfiddle.net/18yL94L2/3/
도움좀 부탁드려봅니다 ~
|
답변 2개 / 댓글 1개
채택된 답변
+20 포인트
nanati
Copy
#base {
background: #ddd;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
border:1px solid #000
}
#base::before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
bottom: -36px;
}
#base::after {
border-top: 35px solid #ddd;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
bottom: -35px;
}이렇게 넣어보세요,
보더는 안먹히니 두 도형을 겹쳐서 비슷한 효과를 낼 수 있습니다.
답변에 대한 댓글 1개
2017-10-29 (일) 14:13:36
#base { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 0 50px 0; height: 0; width: 100px; position: relative; margin: 0px 0 50px 0; }
#base:after { content: ""; position: absolute; top: 50px; left: 0px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }
이렇게 해보세요
답변을 작성하려면 로그인이 필요합니다.