>  기사  >  웹 프론트엔드  >  CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

一个新手
一个新手원래의
2017-09-07 10:38:133413검색


在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式。
切单一角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

采用如上所示css就可以实现样式,修改角度就可以实现任一角度的切角效果。
切两个角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

上述样式中,笔者用了两种颜色以方便读者理解其中的含义。
两个切角实现了,四个切角就很容易了。
四个切角实现:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

上述样式实现了四个平角切角的样式,那么我们进一步构思,想要实现弧形切角该怎么做呢?
弧形切角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법
可以看到,图案类似传统的剃须刀片,实现这种样式并不难,我们用径向渐变来替代线性渐变就可以。

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

想要实现切角的效果,还有不少其他的方案,比如内联svg和border-image方案,裁切路径方案等,感兴趣的读者可以自己探索尝试。

在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式。
切单一角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

采用如上所示css就可以实现样式,修改角度就可以实现任一角度的切角效果。
切两个角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

上述样式中,笔者用了两种颜色以方便读者理解其中的含义。
两个切角实现了,四个切角就很容易了。
四个切角实现:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

上述样式实现了四个平角切角的样式,那么我们进一步构思,想要实现弧形切角该怎么做呢?
弧形切角:
CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법
可以看到,图案类似传统的剃须刀片,实现这种样式并不难,我们用径向渐变来替代线性渐变就可以。

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

想要实现切角的效果,还有不少其他的方案,比如内联svg和border-image方案,裁切路径方案等,感兴趣的读者可以自己探索尝试。

위 내용은 CSS에서 평평한 각도와 호 모따기를 구현하는 스타일 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.