CSS绘制平行四边形

方法有三：

(1)、父元素transform: skewX(-45deg);子元素transform: skewX(45deg);

效果图1：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .react {
      margin-left: 100px;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #ddd;
      transform: skewX(-45deg);
    }
    .text {
      display: inline-block;
      transform: skewX(45deg);
    }
  </style>
</head>

<body>
  <div class="react">
    <span class="text">React前端技术</span>
  </div>
</body>

</html>

(2)、将平行四边形的样式放置于“伪元素”样式中，还是采用transform: skewX(-45deg);

效果图2：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .vue{
      margin-left: 100px;
      position: relative;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .vue::before{
      position:absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
      background: #ddd;
      z-index: -1;
      transform: skewX(-45deg);
    }
  </style>
</head>

<body>
  <div class="vue"> Vue前端技术</div>

</body>

</html>

(3)、先画矩形，再与两头的三角形进行拼接，两个三角形用到的也是"伪元素";

我们先来了解下border绘制宽度和高度为0，border-width有一定宽度的图形，看图说话

border-color: red yellow blue green; //分别为上边框、右边框、下边框、左边框的颜色

效果图3：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .test{
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: red yellow blue green; 

    }
  </style>
</head>

<body>
  <div class="test"></div>

</body>

</html>

那么绘制平行四边形呢？

思路：先画中间的矩形，再用绝对定位绘制两头的三角形，每一个三角形都是由两个小三角形组成的，而其中的小三角形就是上述所说的width、height为0，设置border宽度所绘制，思路懂了吗？看代码，看效果图：

效果图4：

图中采取红、绿、蓝三种颜色，以示区分。自己做项目可改成同一种颜色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .angular{
      margin-left: 100px;
      position: relative;
      display: inline-block;
      width: 300px;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      text-align: center;
      color: #fff;
      background: green;
    }
    .angular::before{
      display: block;
      position: absolute;
      top: 0;
      left: -50px;
      width: 0;
      height: 0;
      content: '';
      border-width: 25px;
      border-style: solid;
      border-color: transparent red blue transparent;
    }
    .angular::after{
      border-color: blue transparent transparent red;
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      border-style: solid;
      border-width: 25px;
      top: 0;
      right: -50px;
    }
  </style>
</head>

<body>

  <div class="angular">Angular前端技术</div>

</body>

</html>

总上所述，本人更喜欢第一种，代码少啊！

应该还有更多的思路，增量补充，欢迎点赞留言！

CSS绘制平行四边形

猜你喜欢