利用CSS怎样写出三角形
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用CSS怎样写出三角形相关的知识，希望对你有一定的参考价值。
利用CSS+DIV怎样写出三角形
<style type="text/css">#bottom
width:0px;
height:0px;
border-left:30px solid #FFFFFF;
border-top:30px #FF6699 solid;
border-right:30px solid #FFFFFF;
#top
width:0px;
height:0px;
border-left:30px solid #FFFFFF;
border-bottom:30px #FF6699 solid;
border-right:30px solid #FFFFFF;
#rt
width:0px;
height:0px;
border-left:30px solid #FFffff;
border-bottom:30px #ff6699 solid;
#lt
width:0px;
height:0px;
border-right:30px #FFffff solid;
border-bottom:30px solid #FF0000;
</style>
下
<div id="bottom"></div>
上
<div id="top"></div>
右下
<div id="rt"></div>
左下
<div id="lt"></div> 参考技术A 一种是把CSS文档放到<head>文档中：
<style type=“text/css”> …… </style>
其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。
另一种方法是把CSS样式表写在html的行内，比如下面的代码：
<p style=“font-size：14pt；color：blue”>蓝色14号文字</p>
这是采用<Style=“ ”>的格式把样式写在html中的任意行内，这样比较方便灵活。 还有一种方法是：把您编辑好的CSS文档保存成“.CSS”文件，然后在<head>中定义。定义的格式是这样的：
<head> <link rel=stylesheet href=“style.css”> …… </head>
我们看到这里应用了一个<Link>，“rel=stylesheet”指连接的元素是一个样式表（stylesheet）文档。一般这里是不需要您改动的。
而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码。
参考技术B http://jiashao1314.cn/lizi/sanjiao.html
这是我刚做好的
原理就是用边框重叠效果做出来的, 你可以去查看下源代码 参考技术C http://www.52css.com/article.asp?id=478
怎么利用CSS3绘制三角形
参考技术A 绘制三角形的原理就是让一个块元素没有宽度和高度，只设置边框，通过让其他三遍transparent就可以实现三角形，这并不是CSS3才能做得。如果一定要CSS3的话，可以看一下CSS3的形变是否可以实现。以上是关于利用CSS怎样写出三角形的主要内容，如果未能解决你的问题，请参考以下文章