css3怎么写三角形,css如何写三角形

发布人：收集　发布时间：2023-05-22

怎么利用CSS3绘制三角形篇1

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

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

利用CSS怎样写出三角形篇2

<styletype="text/css">#bottom{width:0px;height:0px;border-left:30pxsolid#FFFFFF;border-top:30px#FF6699solid;border-right:30pxsolid#FFFFFF;}#top{width:0px;height:0px;border-left:30pxsolid#FFFFFF;border-bottom:30px#FF6699solid;border-right:30pxsolid#FFFFFF;}#rt{width:0px;height:0px;border-left:30pxsolid#FFffff;border-bottom:30px#ff6699solid;}#lt{width:0px;height:0px;border-right:30px#FFffffsolid;border-bottom:30pxsolid#FF0000;}</style>下上右下左下。

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

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

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

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

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

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

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

如何用CSS写一个三角形篇4

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

怎么利用CSS3绘制三角形篇5

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

<divclass="triangle-up"><；！--向上的三角--></div>

<divclass="triangle-down"><；！--向下的三角--></div>

<divclass="triangle-left"><；！--向左的三角--></div>

<divclass="triangle-right"><；！--向右的三角--></div>

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

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

第一种：.triangle-up{

width:0;

height:0;

border-left:30pxsolidtransparent;

border-right:30pxsolidtransparent;

border-bottom:30pxsolid#fff;

}

第二种：.triangle-up{

width:0;

height:0;

border:30pxsolidtransparent;

border-bottom-color:#fff;

}

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

.triangle-down{

width:0;

height:0;

border-left:20pxsolidtransparent;

border-right:20pxsolidtransparent;

border-top:20pxsolid#0066cc;

}

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

.triangle-left{

width:0;

height:0;

border-top:30pxsolidtransparent;

border-bottom:30pxsolidtransparent;

border-right:30pxsolidyellow;

}

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

.triangle-right{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-bottom:50pxsolidtransparent;

border-left:50pxsolidgreen;

}

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

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

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

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

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

CSS样式：duzhi

.divRadius{

border:90pxsolid#555555;

border-left:90pxsolidtransparent;

border-top:90pxsolidtransparent;

border-bottom-right-radius:20px;

content:"";

position:relative;

width:0;

}

html代码：

<divclass="divRadius">

</div>

注意：

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

css3怎样做一个这样的三角形,写一下篇8

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

如何用CSS写一个三角形篇9

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

<divclass="dm">

</div>

<divclass="dm1">

</div>

<divclass="dm2">

</div>

<divclass="dm3">

</div>

<divclass="dm4">

</div>

<divclass="dm5">

</div>

<divclass="dm6">

</div>

<divclass="dm7">

</div>

<style>

.dm{

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

border-bottom:100pxsolid#00897B;

}

.dm1{

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

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

}

.dm2{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-right:100pxsolid#00897B;

border-bottom:50pxsolidtransparent;margin-top:20px;

}

.dm3{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-left:100pxsolid#00897B;

border-bottom:50pxsolidtransparent;margin-top:20px;

}

.dm4{

width:0;

height:0;

border-top:100pxsolid#00897B;

border-right:100pxsolidtransparent;margin-top:20px;

}

.dm5{

width:0;

height:0;

border-top:100pxsolid#00897B;

border-left:100pxsolidtransparent;margin-top:20px;

}

.dm6{

width:0;

height:0;

border-bottom:100pxsolid#00897B;

border-right:100pxsolidtransparent

}

.dm7{

width:0;

height:0;

border-bottom:100pxsolid#00897B;

border-left:100pxsolidtransparent;

}

</style>