很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。 其实使用CSS可以绘制出很多形状，比如三角形，梯形，圆形，椭圆形等等，并不是只能画矩形。 今天的教程，就来教大家怎么去用CSS绘制这些图形吧。 为了方便大家去理解，…

背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 C

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。 为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。 心形是由两个圆…

css 要想实现三角形、梯形灯形状，主要利用 border 的相关特性。那么首先看一下border属性，我们给一个div设置很宽的border。 为了看起来清楚一点，我用了四种不同的颜色进行区分。那么我们设置 width 和 hight 都为 0 ，也就是content所占据的…

纯css实现圆角梯形，以及右侧小斜线，结构简单。主要是利用transform的各种属性，以及perspective属性

第一种方法使用 border 属性 hack 出三角形，并通过对三个元素进行拼接最终实现了平行四边形；而第二种方法则通过 transform: skew 来得到平行四边形。总体来说，第二种方法相对于第一种代码量小得多，而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。希望本文对各位有所帮助。

本文相对较长，详细讲述了如何确定定位点，absolute 和其他相关属性的区别和用法等。

在前面的两篇文章：CSS深入理解之float浮动和CSS深入理解之absolute定位中，介绍了float和absolute的特性和使用方法，如果大家仔细阅读完了这两篇文章，相信你的CSS打怪技能又提高的一大截，那么趁着自己最近状态不错，就多给大家分享点自己平时所学的技能。一方…

通过css用3种方式，分别是 border，linear-gradient 和利用 background-clip 来实现虚线效果，并对实现进行详细讲解。