怎么用CSS3代码书写平行四边形


这篇文章给大家分享的是有关怎么用CSS3代码书写平行四边形的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

用css3的CSS3 transform 旋转的属性写出来,就是transform:skew。

代码如下:

<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>

<title>用css3旋转写平行四边形</title>

<style type="text/css">

.box{width:1200px;margin:100px auto;}

.skew{width:1000px;height:734px;background:#f0eb4f;margin:0 auto;color:#000;

font-size:20px;line-height:500px;text-align:center;transform: skew(-15deg);}

.skew-main{transform: skew(15deg);}

.box02 {

width: 0;

height: 0;

border-top: 100px solid #f44261;

border-right: 100px solid transparent;

}

</style>

</head>

<body>

<div class="box">

<div class="skew"><div class="skew-main">用css3旋转写平行四边形</div></div>

</div>

</body>

</html>

感谢各位的阅读!关于“怎么用CSS3代码书写平行四边形”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


上一篇:Css应用技巧有哪些

下一篇:微信小程序的商业价值是什么


Copyright © 2002-2019 测速网 www.inhv.cn 皖ICP备2023010105号
测速城市 测速地区 测速街道 网速测试城市 网速测试地区 网速测试街道
温馨提示:部分文章图片数据来源与网络,仅供参考!版权归原作者所有,如有侵权请联系删除!

热门搜索 城市网站建设 地区网站制作 街道网页设计 大写数字 热点城市 热点地区 热点街道 热点时间 房贷计算器