css画一个带边框三角形，使用css画一个三角形

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

如何用css实现直接画出三角形以及对话形式的三角形(附代码)

首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。

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

这种三角形常见的方式是通过 border 属性来实现。

希望大家跟着动手一起操作一下感受一下！代码都在图片里 “动手吧” 代码君首先画一个div 给他高宽稍微修改一下，看看给每一个div；都给他们加上边框，注意我这里的边框的顺序，上、右、下、左。

【注意】div的长宽设为0，border为边框，会看到如下四个三角状的图形。

首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

CSS画等腰三角形画直角三角形：画圆形注意：border-radius是width/height的一半（50%）。画半圆：半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。

在矩形的基础上通过设置border-radius，可以得到圆角矩形、圆形（当矩形为正方形且四个角的border-radius设为正方形宽度的一半时）和椭圆（当矩形的四个角的border-radius设为50%时）。下面实现三角形。

新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display：block它。把它的宽高设置为height：0px； width：0px；设置边框border属性，用来实现三角形。

好啦，利用css绘制三角形就说到这里，相信小伙伴们早就一目了然，只要把其中的一条边框的color设置成固定颜色，其他边框color设置透明，就可以画出自己心仪的三角形了。

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。

其实 hack 出三角形只需要两个条件，第一，元素本身的长宽为0；其次，将不需要的部分通过 border-color 来设置隐藏。通过类似的方法，你还可以创造出梯形，上图中的三个图形的代码如下。

利用元素的：after和：before伪元素(请自动忽略低版本IE)。思想：先实现个正方形，在实现个三角形层，放在右上角，然后再实现一个透明的三角形覆盖黑色三角形的内部，只留边框。

只要前端入了门的小伙伴们想必大家一定见过这种组件：上面画圈圈的部分有个三角形，一般这种popup或者tooltip都会存在这么一个小三角形，下面来介绍两种实现方式这种三角形常见的方式是通过 border 属性来实现。

首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。

用border画三角形，实际上属于一种奇淫巧技。利用的是border的一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素。

思想：先实现个正方形，在实现个三角形层，放在右上角，然后再实现一个透明的三角形覆盖黑色三角形的内部，只留边框。

1、第一种方法：利用border一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢？先来看看一张图片：看了图中的三个小图形的变化过程，你应该已经清楚了一半。

2、我们接着把这个div的宽高设为0px，再看效果哈哈，出来了四个三角形，你想要哪个，只需要把其他三个的边框颜色设为透明就可以了。

3、用border画三角形，实际上属于一种奇淫巧技。利用的是border的一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素。

4、思想：先实现个正方形，在实现个三角形层，放在右上角，然后再实现一个透明的三角形覆盖黑色三角形的内部，只留边框。

我们接着把这个div的宽高设为0px，再看效果哈哈，出来了四个三角形，你想要哪个，只需要把其他三个的边框颜色设为透明就可以了。

css画一个带边框三角形的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于使用css画一个三角形、css画一个带边框三角形的信息别忘了在本站进行查找喔。