css에서border를 사용하지 않고 삼각형을 그립니다

10553 단어 CSS
CSS에서 삼각형을 만들려면 border를 이용하는 것이 유명하지만 사이즈 계산과 처리가 까다로워 일반적인div 등 배경을 삼각형으로 만들려고 합니다.했어.
일반적으로width/height만 설정하면 자유롭게 신축할 수 있으며, 밑부분의 100% 삼각형이나 유사한width:auto 삼각형도 쉽게 만들 수 있다.

css
.bottom{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%;
}
.top{
    background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%;
}
.left{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat bottom left/100% 50%,
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/100% 50%;
}
.right{
    background:
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 50%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat bottom right/100% 50%;
}
.topRight{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.topLeft{
    background:
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.bottomRight{
    background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.bottomLeft{
    background:
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
장식 코드를 떼어내면 이런 느낌이 든다.
대응하는 브라우저는 IE9~, 진흙 4.4 이후여야 합니다.아마
생각나면 잘해.
CSS 글꼴 다시 사용
IE를 사용하여 background-imge에 SVG가 지정된 요소를 제거하면 SVG가 표시되지 않습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage