这个菱形是用css中什么属性写的？

html-css023

这个菱形是用css中什么属性写的？,第1张

<style>

.a{ width:0pxheight:0pxmargin:autoborder-bottom:20px solid #f00border-left:40px solid #fffborder-right:40px solid #fff}

.b{ width:0pxheight:0pxmargin:autoborder-top:20px solid #f00border-left:40px solid #fffborder-right:40px solid #fff}

</style>

<div class="a"></div>

<div class="b"></div>

用margin可以。因为margin可以设为负值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

.img-div { background:#ccc width:200px}

.img-div img.margin-t{ margin-top:-30px}

.img-div img.margin-l{ margin-left:32px}

</style>

</head>

<body>

<div class="img-div">

<img src="img.png" /><img src="img.png" /><img src="img.png" />

<img src="img.png" class="margin-t margin-l" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t margin-l"/><img src="img.png" class="margin-t" />

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

</div>

</body>

</html>

附件就是例子，你可以直接看效果。