<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:100px;
}
div{
margin-bottom:100px;
}
.div1{
width: 80px;
height: 80px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* Internet Explorer */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-o-transform: rotate(45deg); /* Opera */
line-height: 80px;
background: #ffb802;
text-align: center;
}
.div1 span{
transform: rotate(-45deg);
display: inline-block;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.div2{
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
background: #E61AE6;
transform:skew(-30deg);
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform:skew(-30deg);
-ms-transform:skew(-30deg);
}
.div2 span{
display: inline-block;
transform:skew(30deg);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform:skew(30deg);
-ms-transform:skew(30deg);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<!-- title属性可以鼠标滑过显示全部,如果字数过多 -->
<div class="div1">
<span title="菱形">菱形</span>
</div>
<div class="div2">
<span title="平行四边形">平行四边形</span>
</div>
</body>
</html>
<script type="text/javascript">
</script>