今天一个刚开始学习html 的小白问我一个问题，css 可以实现正方形，长方形，和圆型（border-radius），怎么能做出个三角形、梯形等等形状呢？于是我便开启了装逼模式， 给他讲解了一下我的思路，在我的帮助下， 他终于用css 做出了自己的三角形、梯形。我表示很欣慰， 于是，为了帮助 ...

闲来无事，写写图形。当时巩固一下css3吧.。前端小白，写的不好还请前辈多指教。 三角形 圆形 梯形 平行四边形 菱形（实现方法有很多，这里只是两个三角形合并，也就是正三角和倒三角） 椭圆形 ...

今天看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。 这里记录总结下 心形 原理：利用 圆形 和 正方形实现 HTML： CSS： 气泡三角形 原理：利用 border 的 transparent 特性实现 HTML ...

clip-path介绍 clip-path可以把一个div元素裁剪成不同的形状，换句话说，可以把div元素不想要的部分剪掉。 clip-path从每个点的坐标着手，沿坐标的路径进行裁剪。 circ ...

各种demo： 1、css实现正方形 思路：width为0；height为0；使用boder-width为正方形的边长的一半，不占任何字节；border-style为固体；border-color为正方形的填充色。 图形 2、css实现三角形 思路 ...

本文篇幅较长，希望能坚持看完，转载请注明出处，如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。 首先我们先给一个正方形设置比较宽的边框 ...

一个三角形 　　结果如下图所示： 将下边框的长度设置为0，实现一个最小空间的三角形 ...

方法一：border 先看看四边 border 颜色不同且不透明时的效果： 以上 rect1、rect3、rect4 个 div 的区别在于 width 和 height 的大小，而 rect2 的 4 边 border-width 值各不相同。 哈哈，三角形和梯形 ...