HTML·手打三角形

方法一：

<style type="text/css">

#css{ width:300px; height:300px; background-color:#00F; transform:rotate(45deg); position:relative; margin:-200px 0px 0px 50px; z-index:1; padding:10px}

</style>

<body>

 <div style="width:400px; height:200px; background-color:#FFF; overflow:hidden; margin-left:300px; margin-top:200px;">

    <div id="css"></div>

 </div>

</body>

这种是一个套在一个里面

方法二：

<style type="text/css">

   .www{width:0px; height:0px; border-bottom:100px solid #FFF; border-left:100px solid #FFF; border-top:100px solid #00F; border-right:100px solid #FFF}

</style>

<body>

<div class="www"></div>

</body>

这个的方法与上文一样就不多赘述了。

posted on 2016-09-18 15:19  ysdong  阅读(1907)  评论(0)    收藏  举报

导航