html - CSS3로 이런 종류의 그래픽을 작성하는 방법

Question

(www.sf.gg)는 중국 최고의 개발자 기술 커뮤니티입니다. 프로그래밍 매니아들에게 순수하고 수준 높은 기술 교류 플랫폼을 제공하고, 개발자들과 함께 배우고, 소통하고, 성장하며, 개발자들을 위한 시대를 만들어 나가고자 합니다!

为情所困 · Answer

CSS3에는 chamfering이라는 작업이 있습니다

PHP中文网 · Answer

巴扎黑 · Answer

간단히 말하면 원형 p 요소의 경계 반경과 패키지의 오버플로를 통해 달성해야 합니다. 더 깊은 주황색은 그림자여야 합니다

習慣沉默 · Answer

정말 죄송합니다. 저는 항상 파이어폭스를 사용해왔지만 radial-gradient크롬과 다를 것이라고는 생각하지 못했습니다. 제가 잘 이해하지 못해서이기도 합니다.

아래 링크를 다시 수정했습니다.

=================

CSS3 변수를 사용하여 반경 크기를 제어하는데 지금으로서는 더 간단한 방법이 생각나지 않습니다.
하향 호환되지 않는 길을 점점 더 나아가고 있습니다...

DEMO-새로운

====================================

자세한 내용은 DEMO를 참조하세요. 추가 태그를 추가하지 않은 순수한 CSS3 구현입니다. 비록 확장성이 높지는 않지만 지속적인 개선을 통해 프로덕션에 투입할 수 있을 것입니다.

CSS3에는 더 많은 마법이 있습니다. 더 깊이 생각해보면 흥미로운 기능이 많이 나올 것입니다. "CSS Revealed"의 저자처럼 말이죠.

데모

Php8, 나도 갈게