使用css画三角形的方法代码

前端技术 2023/09/06 CSS
用纯css画个三角形以下是源代码：

复制代码
代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"<a href=\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>\">
<html xmlns=\"<a href=\"http://www.w3.org/1999/xhtml\">http://www.w3.org/1999/xhtml</a>\">
<head>
<title>用纯css画个三角形</title>
</head>
<body>
<style type=\"text/css\">
.rightdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #A9DBF6;
}
.bottomdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: #A9DBF6 transparent transparent transparent;
}
.leftdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: transparent #A9DBF6 transparent transparent;
}
.topdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: transparent transparent #A9DBF6 transparent;
}
</style>
<div class=\"rightdirection\"></div>
<p>
<div class=\"bottomdirection\"></div>
<p>
<div class=\"leftdirection\"></div>
<p>
<div class=\"topdirection\"></div>
</body>
</html>



画个小三角形


复制代码
代码如下:

<style>
#phpstudy_a{ border-top:10px solid #FFFFCC;
border-left:10px solid #FF3300;
border-bottom:10px solid #FFFFCC;}
</style>
<div id=\"phpstudy_a\"></div>



以下代码兼容IE6：

复制代码
代码如下:

<style>b.sanjiao{
display:inline-block;
width: 0;
height: 0;
border-width: 10px 10px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #ff0000;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}</style>
<b class=\"sanjiao\"></b>


本文地址：https://www.stayed.cn/item/15981

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案