强大的CSS:图形绘制合集,方便你我!

原创 高志飞 教程 css 142阅读 2019-05-23 13:48:40 举报

以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过。

1. 正方形

实时渲染效果如下:

相关CSS代码:

2. 长方形

效果:

相关CSS代码:

3. 正圆

这个显然借助圆角实现,效果如下:

相关CSS代码:

4. 椭圆

效果如下:

相比正圆就是尺寸有些不一样,相关CSS代码:

5. 向上三角

效果如下:

相关CSS代码:

6. 向下三角

效果如下:

相关CSS代码:

7. 方向朝左的三角

效果如下:

相关CSS代码:

8. 方向朝右的三角

效果如下:

相关CSS代码:

9. 左上三角

效果如下:

相关CSS代码:

也可以使用一个45°的斜向线性渐变实现,不过兼容性没有使用border实现好。

10. 右上三角

效果如下:

相关CSS代码:

也可以使用一个45°的斜向线性渐变实现,不过兼容性没有使用border实现好。

11. 左下角三角图形

效果如下:

相关CSS代码:

也可以使用渐变绘制。

12. 右下角三角图形

效果如下:

相关CSS代码:

也可以使用渐变绘制。

13. 弧形尾箭头

效果如下:

完整CSS代码:

实际使用用不到这么大的图形,只要把CSS中所有的数值(不包括旋转)全部都缩小10倍就好了。

14. 梯形

效果如下:

相关CSS代码:

15. 等边四边形

页面渲染效果如下:

可以借助transform属性的skew斜切实现:

16. 六角星

效果如下:

相关CSS代码:

17. 五角星

效果如下:

五角星实现难度要比六角形大得多,CSS代码为:

18. 多边形-五边形

效果如下:

相关CSS代码:

当然,最容易理解的实现方法是使用clip-path

19. 多边形-六边形

效果如下:

相关CSS代码:

20. 多边形-八边形

效果如下:

相关CSS代码:

21. 爱心❥

实现后的爱心效果:

相关CSS代码:

此效果作者是Nicolas Gallagher.

22. 无限

效果如下:

相关CSS代码:

23. 菱形方块

效果如下:

相关CSS代码:

24. 菱形盾构

效果如下:

相关CSS代码:

25. 方块菱形-窄

效果如下:

相关CSS代码:

此效果作者是Joseph Silber.

26. 切割菱形-钻石般

学会了这个,求婚时候直接写几行CSS送给女朋友就好了,可以省很多钱。

值钱的CSS代码:

27. 鸡蛋形状

效果不错:

实现也很简单,就一个border-radius就可以了:

28. 吃豆人

效果如下:

相关CSS代码:

29. 带尖角的说话泡泡

效果如下:

相关CSS代码:

30. 十二星

效果如下:

相关CSS代码:

这个效果的作者是Alan Johnson。

31. 八角形

效果如下:

相关CSS代码:

32. 阴阳八卦

效果如下:

相关CSS代码:

33. 徽章缎带

效果如下:

相关CSS代码:

34. bilibili电视机

效果如下:

相关CSS代码:

35. V形线条

效果如下:

相关CSS代码:

36. 放大镜

效果如下:

相关CSS代码:

这个实现很不错,单位是em,实用性就很强。

37. 月儿弯弯

月儿弯弯照九州:

相关CSS代码:

38. 旗帜

效果如下:

相关CSS代码:

39. 圆锥体

效果如下:

依然是活用圆角border-radius属性:

40. 十字架

效果如下:

可以作为添加按钮,或者添加图标。

相关代码:

41. 棒球踏板形状

效果如下:

相关CSS代码:

42. 长长的指向图形

效果如下:

相关CSS代码:

43. 锁

效果如下:

相关CSS代码:


以上就是本次CSS绘制图形合集。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复