自定义多边形

Question

我们如何在 CSS 中创建下面的形状？

我到处搜索，但没有找到。

Answer 1

我觉得跟你的图一样

body{
  background:black;
}
.outer{
  margin:40px auto;
  width:1200px;
  height:100px;
  background:#37FFF7;
}

.inner {
  margin: 0 auto;
 border-bottom: 30px solid white;
 border-left: 70px solid transparent;
 border-right: 70px solid transparent;
 height: 0;
 width: 700px;
  position: relative;
  top:70px;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

只需使用 border 属性即可完成：

    #inner{
      position:relative;
      margin:0 auto;
      width:50%;
      background:lightblue;
      border-top:40px solid transparent;
       border-bottom:40px solid white;
        border-left:60px solid transparent;
       border-right:60px solid transparent;
       
    }
    #parent{
      width:100%;
      height:80px;
      background:lightblue;
      margin-top:100px;
    }
     body{background:#000;}

    <div id="parent">
    <div id="inner"></div>


    </div>

Answer 3

您可以使用此代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
    #trapezium {
    height: 0;
    width: 100%;
    border-bottom: 60px solid white;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    margin-top: 4%
    }
    </style>
  </head>
  <body>
    <br>
    <br><br><br>
    <div class="container" style="background-color: rgb(55,255,247);height: 60px;">
      <div class="col-lg-2"></div>
      <div class="col-lg-8">
        <div id="trapezium"></div>
        </div>
      <div class="col-lg-2"></div>
      </div>
  </body>
</html>

可能对你有帮助。

Answer 4

以下是创建此形状的其他可能方法。让我们将它们分为两大类：

CSS 基于方法：

下面是一些纯 CSS 方法来创建这个形状：

1- 三角形边框:

使用 ::before 和 ::after 伪元素创建两个叠加层。
应用 CSS border 属性创建三角形效果。
将它们放在 position: absolute 元素的两个底角。

工作示例：

.shape {
  background: linear-gradient(skyblue, skyblue) no-repeat;
  background-position: left bottom 30px;
  position: relative;
  min-height: 100px;
  overflow: hidden;
}

.shape::before,
.shape::after {
  border-left: 30vw solid skyblue;
  border-top: 30px solid skyblue;
  border-right: 30px solid transparent;
  position: absolute;
  content: '';
  bottom: 0;
  height: 0;
  width: 0;
  left: 0;
}

.shape::after {
  border-right: 30vw solid skyblue;
  border-top: 30px solid skyblue;
  border-left: 30px solid transparent;
  left: auto;
  right: 0;
}

<div class="shape"></div>

2- 倾斜变换：

使用 ::before 和 ::after 伪元素创建两个叠加层。
应用 skewX() 变换创建斜角。
用 position: absolute 将它们放在父级的每个角上。

工作示例：

.shape {
  background: linear-gradient(skyblue, skyblue) no-repeat;
  background-position: left bottom 30px;
  position: relative;
  min-height: 100px;
  overflow: hidden;
}

.shape::before,
.shape::after {
  transform-origin: left bottom;
  transform: skewX(-45deg);
  position: absolute;
  background: skyblue;
  height: 30px; 
  left: -45px;
  content: '';
  width: 30%;
  bottom: 0;
}

.shape::after {
  transform-origin: right bottom;
  transform: skewX(45deg);
  right: -45px;
  left: auto;
}

<div class="shape"></div>

3 - 线性渐变：

在这种方法中，我们将使用 CSS linear-gradient() 函数在元素上绘制此形状作为背景。由于我们可以在一个元素上应用多个背景图像，因此我们将把这个形状分成小部分，然后以精确控制的大小和位置将它们绘制在元素上。

我们可以把这个形状分成三部分，分别画出它们的大小和位置。我试图突出显示下图中的每个部分：

工作示例：

.shape {
  background-image: linear-gradient(-45deg, transparent 25px, skyblue 25px),
                    linear-gradient(45deg, transparent 25px, skyblue 25px),
                    linear-gradient(skyblue, skyblue);

  background-repeat: no-repeat;
  background-size: 30% 100%, 30% 100%, 100% 100%;
  background-position: left bottom, right bottom, left bottom 30px;
  min-height: 100px;
}

<div class="shape"></div>

4 - 剪辑路径：

剪辑意味着删除或隐藏元素的某些部分。

clip-path CSS 属性可以用来显示元素的某个区域，而不是显示整个区域。此属性定义的剪辑区域之外的任何区域都将被隐藏。

我们可以使用polygon()基本形状来定义裁剪区域：

div.shape {
  clip-path: polygon(0 0, 0 100%, 25% 100%, 28% 80%, 72% 80%, 75% 100%, 100% 100%, 100% 0);
}

工作示例：

.shape {
  clip-path: polygon(0 0, 0 100%, 25% 100%, 28% 80%, 72% 80%, 75% 100%, 100% 100%, 100% 0);
  background: green;
  min-height: 100px;
}

<div class="shape"></div>

注意：此方法可能不适用于所有浏览器。检查其 Browser Support.

基于 SVG 的方法：

1 - 多边形形状：

在这种方法中，我们将使用 SVG 的 polygon 元素创建此形状，并使用 fill 属性.

为其填充所需的背景颜色

polygon 元素需要一个属性 points，其中包含连接在一起以绘制闭合 shpae 的点列表。

下面是必要的代码：

<polygon points="0,0 0,30 25,30 28,22 72,22 75,30 100,30 100,0" />

工作示例：

.shape {
  fill: skyblue;
}

<svg height="100px" width="100%" viewBox="0 0 100 30" preserveAspectRatio="none" xmlns="http://www/w3.org/2000/svg">
  <polygon class="shape" points="0,0 0,30 25,30 28,22 72,22 75,30 100,30 100,0" />
</svg>

2 - 剪辑路径：

这与上一节中讨论的概念相同。但是 SVG 有自己的语法来定义剪辑区域。

工作示例：

.shape {
  fill: skyblue;
}

<svg height="100px" width="100%" viewBox="0 0 100 30" preserveAspectRatio="none" xmlns="http://www/w3.org/2000/svg">
  <defs>
    <clipPath id="shape">
      <polygon points="0,0 0,30 25,30 28,23 72,23 75,30 100,30 100,0" /> 
    </clipPath>
  </defs>

  <rect x="0" y="0" width="100" height="30" class="shape" clip-path="url(#shape)" />
</svg>

自定义多边形

Custom Polygon Shape

html

css

css-shapes

CSS 基于方法：

基于 SVG 的方法：