用css3写三角形_育才学习网

css3怎么写三角形

1.css3怎样做一个这样的三角形,写一下

用线性滤镜就行 background: linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -o-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -moz-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -webkit-linear-gradient(135deg,rgba(0,0,0,0) 34px,red。

2.如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

.dm {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #00897B;

}

.dm1{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #00897B;margin-top: 20px;

}

.dm2{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm3{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm4{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-right: 100px solid transparent;margin-top: 20px;

}

.dm5{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-left: 100px solid transparent; margin-top: 20px;

}

.dm6{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-right: 100px solid transparent

}

.dm7{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-left: 100px solid transparent;

}

</style>

3.怎么利用CSS3绘制三角形

1、新建一个html5网页，名称为index.html，在<body>；代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

2、然后新建一个css文件style.css，并在index.html中引入，引入代码：<link rel="stylesheet" type="text/css" href="style.css">

3、先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：

第一种： .triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

第二种：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

}

4、接下来写向下的三角形，继续在css文件中输入以下代码：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

5、然后是向左的三角形，代码为：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

6、最后是向右的三角形，代码为：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

4.怎么利用CSS3绘制三角形

1、新建一个html5网页，名称为index.html，在<body>代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下： <！--向上的三角--> <！--向下的三角--> <！--向左的三角--> <！--向右的三角--> 2、然后新建一个css文件style.css，并在index.html中引入，引入代码：<link rel="stylesheet" type="text/css" href="style.css">3、先做向上的三角形，这里有两种写法，大家可以参考下。

在css文件中输入以下代码：第一种： .triangle-up { width:0;height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff；}第二种：.triangle-up { width:0; height:0; border:30px solid transparent; border-bottom-color:#fff;}4、接下来写向下的三角形，继续在css文件中输入以下代码：.triangle-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc;}5、然后是向左的三角形，代码为：.triangle-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow;}6、最后是向右的三角形，代码为：.triangle-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green;}。

5.如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+ <style> .dm { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #00897B;}.dm1{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #00897B;margin-top: 20px;}.dm2{ width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm3{ width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm4{ width: 0; height: 0; border-top: 100px solid #00897B; border-right: 100px solid transparent;margin-top: 20px;}.dm5{ width: 0; height: 0; border-top: 100px solid #00897B; border-left: 100px solid transparent; margin-top: 20px;}.dm6{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-right: 100px solid transparent}.dm7{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-left: 100px solid transparent;}</style>。

6.利用CSS怎样写出三角形

7.怎么用css3写出一角是圆角的三角形

CSS样式：duzhi

.divRadius {

border: 90px solid #555555;

border-left: 90px solid transparent;

border-top: 90px solid transparent;

border-bottom-right-radius: 20px;

content: "";

position: relative;

width: 0;

}

html代码：

</div>

注意：

border、border-left、border-top宽度一样。dao.divRadius中需专要有东西支属撑。

8.如何用css3画一个有边框的三角形

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

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。

整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。

首先我们来看下，当定位都为0(left:0px; top:0px；)时，会发生什么。 HTML： <！-- 向上的三角形 --> <！-- 向下的三角形 --> <！-- 向左的三角形 --> <！-- 向右的三角形 --> CSS： /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333；/*透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0；/*透明透明黄*/ position:absolute; top:0px; left:0px； } /*向下*/ .triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent；/*灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_down span{ display:block; width:0; height:0; border-width:28px 28px 0; border-style:solid; border-color:#fc0 transparent transparent；/*黄透明透明 */ position:absolute; top:0px; left:0px； } /*向左*/ .triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent；/*透明灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_left span{ display:block; width:0; height:0; border-width:28px 28px 28px 0; border-style:solid; border-color:transparent #fc0 transparent transparent；/*透明黄透明透明 */ position:absolute; top:0px; left:0px； } /*向右*/ .triangle_border_right{ width:0; height:0; border-width:30px 0 30px 30px; border-style:solid; border-color:transparent transparent transparent #333；/*透明透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_right span{ display:block; width:0; height:0; border-width:28px 0 28px 28px; border-style:solid; border-color:transparent transparent transparent #fc0；/*透明透明透明黄*/ position:absolute; top:0px; left:0px； } 效果如图：为什么不是我们预想的如下图的样子呢原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。再结合上篇我们最开始写的宽高为0的空div：这个空的div,content的位置在中心，所以内部三角形是根据中心这个点来定位的。

为了看清楚一些，我们使用上一次的方法，给span增加一个阴影： 1 box-shadow:0 0 2px rgba(0,0,0,1)；效果如图：这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。 HTML不变，CSS： /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333；/*透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0；/*透明透明黄*/ position:absolute; top:1px; left:-28px； } /*向下*/ .triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent；/*灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_down span{ display:block; width:0; height:0; border-width:28px 28px 0; border-style:solid; border-color:#fc0 transparent transparent；/*黄透明透明 */ position:absolute; top:-29px; left:-28px； } /*向左*/ .triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent；/*透明灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_left span{ display:block; width:0; height:0; border-width:28px 28px 28px 0; border-style:solid; border-color:transparent #fc0 transparent transparent；/*透明黄透明透明 */ position:absolute; top:-28px; left:1px； } /*向右*/ .triangle_border_right{ width:0; height:0; border-width:30px 。

9.如何用css3绘制有边框的三角形

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

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。

整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。

css3怎么写三角形

css3三角形怎么写

1. 如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

.dm {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #00897B;

}

.dm1{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #00897B;margin-top: 20px;

}

.dm2{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm3{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm4{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-right: 100px solid transparent;margin-top: 20px;

}

.dm5{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-left: 100px solid transparent; margin-top: 20px;

}

.dm6{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-right: 100px solid transparent

}

.dm7{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-left: 100px solid transparent;

}

</style>

2. 怎么利用CSS3绘制三角形

1、新建一个html5网页，名称为index.html，在<body>；代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

2、然后新建一个css文件style.css，并在index.html中引入，引入代码：<link rel="stylesheet" type="text/css" href="style.css">

3、先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：

第一种： .triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

第二种：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

}

4、接下来写向下的三角形，继续在css文件中输入以下代码：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

5、然后是向左的三角形，代码为：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

6、最后是向右的三角形，代码为：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

3. 如何用css3绘制有边框的三角形

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

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。

整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。

4. 如何用css3画一个有边框的三角形

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

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。

整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。

首先我们来看下，当定位都为0(left:0px; top:0px；)时，会发生什么。 HTML： <！-- 向上的三角形 --> <！-- 向下的三角形 --> <！-- 向左的三角形 --> <！-- 向右的三角形 --> CSS： /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333；/*透明e799bee5baa6e58685e5aeb931333361326333 透明灰*/ margin:40px auto; position:relative; } .triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0；/*透明透明黄*/ position:absolute; top:0px; left:0px； } /*向下*/ .triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent；/*灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_down span{ display:block; width:0; height:0; border-width:28px 28px 0; border-style:solid; border-color:#fc0 transparent transparent；/*黄透明透明 */ position:absolute; top:0px; left:0px； } /*向左*/ .triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent；/*透明灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_left span{ display:block; width:0; height:0; border-width:28px 28px 28px 0; border-style:solid; border-color:transparent #fc0 transparent transparent；/*透明黄透明透明 */ position:absolute; top:0px; left:0px； } /*向右*/ .triangle_border_right{ width:0; height:0; border-width:30px 0 30px 30px; border-style:solid; border-color:transparent transparent transparent #333；/*透明透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_right span{ display:block; width:0; height:0; border-width:28px 0 28px 28px; border-style:solid; border-color:transparent transparent transparent #fc0；/*透明透明透明黄*/ position:absolute; top:0px; left:0px； } 效果如图：为什么不是我们预想的如下图的样子呢原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

5. 如何用css3绘制有边框的三角形

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

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。

整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。

首先我们来看下，当定位都为0(left:0px; top:0px；)时，会发生什么。 HTML: CSS： /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333；/*透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0；/*透明透明黄*/ position:absolute; top:0px; left:0px； } /*向下*/ .triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent；/*灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_down span{ display:block; width:0; height:0; border-width:28px 28px 0; border-style:solid; border-color:#fc0 transparent transparent；/*黄透明透明 */ position:absolute; top:0px; left:0px； } /*向左*/ .triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent；/*透明灰透明透明 */ margin:40px auto; position:relative; } .triangle_border_left span{ display:block; width:0; height:0; border-width:28px 28px 28px 0; border-style:solid; border-color:transparent #fc0 transparent transparent；/*透明黄透明透明 */ position:absolute; top:0px; left:0px； } /*向右*/ .triangle_border_right{ width:0; height:0; border-width:30px 0 30px 30px; border-style:solid; border-color:transparent transparent transparent #333；/*透明透明透明灰*/ margin:40px auto; position:relative; } .triangle_border_right span{ display:block; width:0; height:0; border-width:28px 0 28px 28px; border-style:solid; border-color:transparent transparent transparent #fc0；/*透明透明透明黄*/ position:absolute; top:0px; left:0px； } 效果如图：为什么不是我们预想的如下图的样子呢原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

转载请注明出处育才学习网 » 用css3写三角形