使用CSS绘制一个平行四边形
程序员文章站
2022-04-01 17:55:36
...
使用CSS绘制一个平行四边形，这里使用的主要属性是 transform: skew(15deg)，相当于对元素进行旋转，不过IE9 一下是不支持的，如果需要向下兼容，建议使用四边形图片代替。使用CSS 代码处理如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
<title>平行四边形</title>
<style type="text/css">
.box {
width: 120px;
}
.skew {
width: 118px;
height: 34px;
background: #4effe1;
margin: 0 auto;
color: #000;
font-size: 17px;
line-height: 34px;
text-align: center;
transform: skew(-15deg);
}
.skew-main {
transform: skew(15deg);
}
</style>
</head>
<body>
<div class="box">
<div class="skew">
<div class="skew-main">退出</div>
</div>
</div>
</body>
</html>
上一篇： 计算多边形围栏的面积
下一篇： Gradle 0.9 发布