css画三角形

Posted on Posted in css
Tips: 本文创建于2014年10月27日,已超过 2 年,内容或图片可能已经失效!

效果图

triangle

 

以下是代码

<html>
<head>
<style type="text/css">
.triangle{
height:0px;
width:0px;
border:50px solid #000;
border-color:#f00 #000 #f0f #00f;
}
.rightdirection
{
    width:0;height:0;
    line-height:0;
    border-width:50px;
    border-style:solid;
    border-color:transparent transparent transparent #00f;
}
.bottomdirection
{
    width:0;height:0;
    line-height:0;
    border-width:50px;
    border-style:solid;
    border-color😕#f00 transparent transparent transparent;
}
.leftdirection
{
    width:0;height:0;
    line-height:0;
    border-width:50px;
    border-style:solid;
    border-color😕transparent #000 transparent transparent;
}
.topdirection
{
    width:0;height:0;
    line-height:0;
    border-width:50px;
    border-style:solid;
    border-color😕transparent transparent #f0f transparent;
}
.bottomright{
    width:0;height:0;
    border:50px solid #000;
    border-color:#f00 #000 transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
<br />
<div class="rightdirection"></div>
<br />
<div class="bottomdirection"></div>
<br />
<div class="leftdirection"></div>
<br />
<div class="topdirection"></div>
<br />
<div class="bottomright"></div>
</body>
</html>
» 转载请注明来源:呢喃 » css画三角形

Leave a Reply

Your email address will not be published. Required fields are marked *

five + five =