直角梯形实现方法

最新推荐文章于 2024-12-13 11:11:30 发布

原创最新推荐文章于 2024-12-13 11:11:30 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

布局专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用CSS创建直角梯形的两种方法。第一种方法利用border属性，设置border-top和border-right实现。第二种方法通过背景色加伪元素的方式，结合border属性创建直角和梯形效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. float元素显示只能由本身的line-height,height,margin,padding来调节

绝对定位元素位置才可以用top,left调节

float元素定位与上一个元素和父元素都有关，而绝对定位元素定位时与上一个元素没有关系，只与父元素有关

上图中直角梯形css实现方法：

.tixing{
    height:0px;
   width:40px;
   border-top: 25px solid red;
    border-right:20px solid transparent;
    position:absolute;
    top:0px;
   left:0px;
}

也可以设置爆款的背景色+css设置三角形实现：

css如下：

.temaihui .bd .pic{
   position: relative;
}
.temaihui .bd .pic span{
   position: absolute;
   top: 0;
   left: 0;
   width: 38px;
   height: 20px;
   background-color: red;
   text-align: center;
   font-size: 12px;
   color:white;
   line-height: 20px;
}
.temaihui .bd .pic span:before{
   content:"";
   position: absolute;
   top: 0;
   left: 38px;
   width: 0px;
   height: 0px;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   border-top:20px solid red;
   border-right:8px solid transparent;
}