item-thumbnail .ribbon{position:absolute; top:0; left:0; width:50px; height:50px;~~~

 

위 코드가 지금 제 사이트 상품에 뜨는 리본 썸네일 코드인데요,

저렇게 하면 가로세로 50픽셀 사각형으로만 나오는데 저거를 지름 50픽셀 원형으로 바꾸는 코드가 어떻게 되지요??

shape=cirlce, circle, type=circle 이런거 넣어보고 시도하는데 잘 모르겠습니다 ㅠㅠ

  • ?
    T21 2017.02.18 04:33:20
    border-radius: 25px
    1
  • ?
    기븐 2017.02.18 06:48:53
    100px 아닐까요?
    1
  • ?
    김범진 2017.02.18 08:36:08
    T21님 , 감사합니다. border 를 쓰는게 맞군요!
    참고로 25px 이상인 수 부터 다 원형으로 뜨네요. 기븐님도 감사합니다^^
  • profile
    Double'U' 2017.02.18 10:14:40
    호환성을 위해서는
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    도 같이 써주세요.
    그렇지만 이 코드는 ie8이하에서는 안 먹힙니다.
    다른 방법으로 만들어야 해요.

    50px짜리 이미지이니 25로 되는 것은 25가 반지름인데 모퉁이별로 적용되서 25+25가 50이라서 그렇습니다.
    1
  • ?
    김범진 2017.02.18 15:35:34
    감사합니다^^ 정말 처음보는 명령어 코드네요 ㅠㅠ 역시 고수들은 다르다 ㅠㅠ
  • ?
    SimpleCode 2017.02.18 13:11:55
    이미지 크기가 불확실한 경우(가변형인 경우)에는 border-radius:50%로 줘도 됩니다.
    2
  • ?
    김범진 2017.02.18 15:36:00
    네 한번 시도해보겠습니다! 감사합니다^^

서버에 요청 중입니다. 잠시만 기다려 주십시오...