css样式3三角形 css怎么设置三角形

如何使用CSS的border属性画个三角形

通过设置宽和高为0 ，改变 border-color 属性即可实现三角形效果。在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。

成都创新互联公司专注于伊州网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供伊州营销型网站建设，伊州网站制作、伊州网页设计、伊州网站官网定制、微信平台小程序开发服务，打造伊州网络公司原创品牌,更为您提供伊州网站排名全网营销落地服务。

border-color： red transparent transparent transparent；请点击输入图片描述利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。

在css中可以使用border实现一个三角形，举个例子：效果展示如下：那么为什么将border的三个边设置为transparent透明以后能生产一个三角形呢？接下来我们一步步解析。

在桌面新建一个文本文档，并命名为“三角形”，打开新建的文本文档，把html里的doctype、head、body等框架搭好。【注意】可以在写完之后再重新重命名为.html文件。

如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。

当div宽度为0，高度为0的时候，只设置border的大小和四边不同颜色可看到下图，只保留一边的颜色，另外三边的颜色设置为transparent可得到一个方向的三角形。

利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。

1、然后需要的一边设置为自己想要的颜色即可。div{ border：20px solid transparent； border-left-color：#ff0000；}例如上面就是一个向右的三角形。当然你可以可以利用左边框和下边框拼成一个大三角形，其他都类似。

2、lxm 19872006 的方法是可行的。

3、css 画三角形的原理就是给一个没有宽和高的元素加边框，没有宽高的情况下，边框就是4个向心的三角形组成的。再隐掉不需的三个边，三角形就出来了，三角形大小由边框宽度决定。

4、用一个白色的，边沿虚化的，透明格式（如PNG）的直角三角形图片覆盖在文字上面即可。这是最简单的方法。

5、不定义div的宽度，以及父div的宽度即可。

分享标题：css样式3三角形 css怎么设置三角形
文章链接：http://pwwzsj.com/article/dieeihj.html