Question

如果有人能帮助我，那就太好了！这是什么形状，你对我如何在CSS中实现这种形状有任何想法吗？

编辑：我已经设法通过以下jquery解决了梯形的管理问题：

        function unassignTrap(obj) {
        console.log(obj);
        $('.trapezoid').each(function () {
            $(this).removeClass('trapezoid');
            $(this).addClass('trapezoid2');
        })
        $(obj).removeClass('trapezoid2');
        $(obj).addClass('trapezoid');
    }

Answer 1

它可能是（某种形式）梯形，当您使用end元素时，CSS很容易。

border

.trapezoid {
  border-bottom: 50px solid lightblue;
  border-left: 0px solid transparent;
  border-right: 80px solid transparent;
  height: 0;
  width: 300px;
}

Answer 2

它基本上是一个倾斜的矩形div。您可以使用以下代码实现它：

div {
    width: 300px;
    height: 100px;
    background-color: blue;
    opacity: .5;
}

#skew {
    margin-left:50px;
    -ms-transform: skewX(45deg);
    -webkit-transform: skewX(45deg); 
    transform: skewX(45deg); 
}

<html>
<head>

</head>
<body>
<div>
Normal Element.
</div>
<br>
  <br>
<div id="skew">
  skewed 45 degrees along the X-axis.
</div>

</body>
</html>

Answer 3

您可以使用:after

创建此内容

＆＃13;

div {
  position: relative;
  width: 100px;
  height: 20px;
  background: #55C7E3;
}
div:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0 20px;
  transform: translateX(100%);
  border-color: transparent transparent transparent #55C7E3;
}

＆＃13;

<div>Lorem ipsum</div>

＆＃13;

以下是具有此形状的标签示例

＆＃13;

$('ul li').click(function() {
  $(this).addClass('active');
  $(this).siblings().removeClass('active');
});

＆＃13;

li {
  position: relative;
  padding: 5px 25px;
  display: inline-block;
  background: #E3E4E6;
  margin-right: 30px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
li:after {
  content: '';
  position: absolute;
  transition: all 0.3s ease-in;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 0 0 30px;
  transform: translateX(100%);
  border-color: transparent transparent transparent #E3E4E6;
}
li.active {
  background: #55C7E3;
}
li.active:after {
  border-color: transparent transparent transparent #55C7E3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
</ul>

＆＃13;

这是什么形状，我如何使用CSS实现它？

3 个答案: