纯 CSS 实现各种几何图形 All In One

纯 CSS 实现 三角形、正方形、长方形、圆形、半圆、扇形、椭圆、平行四边形、菱形、梯形、六角星、五角星、心形、消息框、九宫格...

CSS 实现三角形

1. border-color: transparent transparent transparent #2CCD76;
2. transform: rotateZ(45deg);

https://codepen.io/xgqfrms/pen/KKyWeWE

CSS 实现正方形，自适应宽高

CSS 实现图形效果

https://mp.weixin.qq.com/s?__biz=MzU5NDg1NDAxNw==&mid=2247485385&idx=1&sn=0b5504e909b1834b362240784f0d361d

CSS 实现扇形

https://mp.weixin.qq.com/s?__biz=MzI4MzA5NTI0NA==&mid=2247483687&idx=1&sn=3fc23f90416e88f3578f024621eeed58

CSS 实现正方形九宫格

https://mp.weixin.qq.com/s?__biz=MzI2NjQ3NDcyNQ==&mid=2247483742&idx=1&sn=7db54ee77597d2a04796a6d049a60d88

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！