优秀程序员web前端学习路线分享纯css绘制各种图形，很多时候，UI设计师为了让页面好看，会用很多图形进行装饰，比如三角形、长方形、圆形、椭圆形、对话泡泡等，让整个页面看起来不会过于单调。作为一个前端开发比较多的人，会使用比较快的方式来实现页面效果，就是使用图片或者背景图片，但是有个很大的问题就是图片可能会失真，在某些情况下会发现使用图片或背景图片来实现效果的灵活性不够。所以如果你不需要图片，你可以用纯CSS绘制各种图形。很多人认为CSS只能写一些简单的图形，比如长方形、正方形、圆形、椭圆形。还可以绘制一些比较复杂的图形，比如心形、菱形、太极八卦、对话泡泡等，这些效果的实现都会用到CSS3相关的属性。大家都知道CSS3属性对浏览器的兼容性不是很好，所以我希望自己在模仿这些效果的时候，可以用Chrome和Firefox浏览器打开，虽然IE也可以查看。部分效果，但为了更好的视觉体验，不要用IE看。好了，废话不多说，我们来看看CSS绘制的图形。1. 向上三角形 CSS核心代码 .triangle-up{ width:0; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; border-bottom:100px纯红色; }2、 左上三角CSS核心代码.triangle-topleft{width:0;border-top：100px纯红色；border-right:100pxsolidtransparent;}3。 弯尾箭头CSS核心代码 .curvedarrow{ position:relative; 宽度：0； border-top:90pxsolidtransparent; border-right:90pxsolidred; transform:rotate(10deg)translateX(100%); } .curvedarrow:after{ content:""; position:absolute; border:0solidtransparent; border-top:30pxsolidred; border-radius:200px000; top:-120px;左：-90px； 宽：120px；height:120px; transform:rotate(45deg); }4、 吃豆人CSS核心代码： .pacman{ width:0px;height:0px; border-right:60pxsolidtransparent; border-top:60pxsolidred; border-left:60pxsolidred; border-bottom:60pxsolidred; 左上边框半径：60px； 右上边框半径：60px； 左下边框半径：60px； 右下边框半径：60px； }5、 带尖角的说泡泡CSS核心代码： .talkbubble{ width:120px;height:80px; background:red; position:relative; border-radius:10px; } .talkbubble:before{ content:""; position:absolute; right:100%;top:26px; border-top:13pxsolidtransparent; border-right:26pxsolidred; border-bottom:13pxsolidtransparent; }6、bilibili电视机CSS核心代码 .tv{ position:relative; width:200px;height:150px; margin:20px0; background:red; border-radius:50%/10%; color:white; text-align:center; 文本缩进：.1em; } .tv:before{ 内容：''; 位置：绝对； 顶部：10%；底部：10%；右：-5%；left:-5%; background:inherit; border-radius:5%/50%; }7、放大镜.magnifying-glass{font-size:10em;显示：内联块；宽度：0.4em；高度：0.4em；边框：0.1em纯红色；位置：相对；border-radius:0.35em;}.magnifying-glass:before{content:"";显示：内联块；位置：绝对；右：-0.25em；底部：-0.1em；边框宽度：0；背景：红色；宽度：0.35em；高度：0.08em；transform:rotate(45deg);}8、长的指针图形CSS内核代码：.pointer{width:200px;高度：40px；位置：相对；背景：红色；}.pointer：之后{内容：“”；位置：绝对；左：0；底部：0；左边框：20px纯白色；border-top:20px实心透明；border-bottom:20pxsolidtransparent;}.pointer:before{content:"";位置：绝对；右：-20px；底部：0；左边框：20px纯红色；border-top:20px实心透明；border-bottom:20pxsolidtransparent;} 最后向朋友们强调一下，由于一些图形效果使用了CSS3的一些属性，如果你还在使用IE，我建议你使用现代浏览器，如：MozillaFirefox、GoogleChrome、Safari、Opera。上面展示的一些效果可能不是很实用，但是使用css制作三角形和圆形还是有很多有效的应用，尤其是制作提示效果。
