css样式三角形,css3三角形样式

怎么用css写出三角形？

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

请点击输入图片描述

首先我们创建一个带边框的div：

具体代码实现如下：

width: 40px;

height: 40px;

border-width: 40px;

border-style: solid;

border-color: red green blue brown;

请点击输入图片描述

然后我们将内部DIV的宽高设置为0：

width: 20px;

height: 20px;

border-width: 10px;

border-style: solid;

border-color: red green blue brown;

请点击输入图片描述

将其他的三个边框给取消点：

width: 0;

height: 0;

border-width: 40px;

border-style: solid;

border-color: red transparent transparent transparent;

请点击输入图片描述

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

请点击输入图片描述

6

使用上面的方式实现三角形有一个问题就是，三角形的方位不太好控制，但是使用其他的方式依然会面临这样的问题。

请点击输入图片描述

相关问答

Q1: 实现css中三角形写法

1、理论

三角形实现原理：宽度width为0；height为0；

（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。

（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

二、实现

2.1 Triangle Up

#triangle-up {width:0;    height:0;    

border-left:50px solid transparent;    

border-right:50px solid transparent;    

border-bottom:100px solid red;}

2.2 Triangle Down

#triangle-down {width:0;    height:0;  

  border-left:50px solid transparent;    

border-right:50px solid transparent;    

border-top:100px solid red;}

2.3 Triangle Left

#triangle-left {

width:0;  

  height:0;  

  border-top:50px solid transparent;  

  border-right:100px solid red;   

 border-bottom:50px solid transparent;}

2.4 Triangle Right

#triangle-right {width:0;    

height:0;    

border-top:50px solid transparent;   

 border-left:100px solid red;    

border-bottom:50px solid transparent;}

2.5 Triangle Top Left

#triangle-topleft {width:0;  

  height:0;    

border-top:100px solid red;   

 border-right:100px solid transparent;}

2.6 Triangle Top Right

#triangle-topright {width:0;   

 height:0;  

  border-top:100px solid red;    

border-left:100px solid transparent; }

2.7 Triangle Bottom Left

#triangle-bottomleft {width:0;   

 height:0;    

border-bottom:100px solid red;   

 border-right:100px solid transparent;}

2.8 Triangle Bottom Right

#triangle-bottomright {width:0;    

height:0;   

 border-bottom:100px solid red;    

border-left:100px solid transparent;}

Q2: CSS实现三角形

通过设置 宽和高为0 ，改变 border-color 属性即可实现三角形效果。

在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。