例如: 我们想绘制一个方向向右的三角形，只需要给左侧border设置颜色，其他设置为transparent即可。border-...
CSS还是蛮强大的,对于三角形这个在网页上不规则的形状,很多前端小朋友们直接切图了,这样的做法可谓是偷懒啦,下面咱们就体验下纯CSS是实现的三角形吧。各种角度,带你尝试下。 其实三角的实现就是用border来做的。 下面是步骤分析: 1、首先来看看给一个元素添加不同颜色的边框吧 说明:我们来看四条边框相交的角,...
当然，要保持三角形大小一致，在增大/缩小stroke-width 的同时，需要缩小/增大图形的 width/height：完整的 DEMO 你可以戳这里： CodePen Demo -- 使用 SVG 实现带圆角的三角形 法二. 图形拼接 不过，上文提到了，使用纯 CSS 实现带圆角的三角形，但是上述第一个方法其实是借助了 SVG。那么仅仅使用...
最后，给父元素添加一个overflow: hidden并且去掉父元素的border即可得到一个圆角三角形：由于这两个元素...
法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角形，代码量最少、最好的方式是使用 SVG 生成。...