首页 > Web开发 > 详细

css绘制梯形

时间:2019-11-23 18:52:13      阅读:77      评论:0      收藏:0      [点我收藏+]

1.div写法

<div class="house_roof"></div>

2.css样式

.house_roof{
  position:absolute;
  top:30%;
  padding:  0;
  text-decoration: none;
  display: inline-block;
  z-index: 0;
  width:65%;
  height:60px;
  line-height:28px;
  text-align:right;
  padding-right:10px;
  font-size:16px;
}
.house_roof::before{
  content: ‘‘;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,160,233,0.2);
  border: 1px solid #00ffff;
  border-bottom: none;
  -webkit-transform:perspective(0.5em)scale(1,1) rotateX(1deg);
  z-index: -1;
  /* -webkit-transform-origin:bottom right; */
}

 

3.图片展示

技术分享图片

 

css绘制梯形

原文:https://www.cnblogs.com/menxiaojin/p/11918792.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!