Question

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

我到处搜索但没有运气。

Answer 1

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

基于CSS的方法：

下面是几个基于CSS的纯方法来创建这个形状：

1-三角边界

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

工作示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

2-偏斜变换：

使用::before和::after伪元素创建两个叠加层。
应用skewX()转换以创建倾斜的角落。
使用position: absolute将其放置在父级的每个角落。

工作示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

3 - 线性渐变：

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

我们可以将这个形状分成3个部分，并绘制出各自具有特定尺寸和位置的形状。我试图突出显示下图中的每个部分：

工作示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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);
}

工作示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

注意： 此方法可能无法在所有浏览器中使用。检查其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" />

工作示例：

＆＃13;

.shape {
  fill: skyblue;
}

＆＃13;

<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>

＆＃13;

2 - 剪辑路径：

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

工作示例：

＆＃13;

.shape {
  fill: skyblue;
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为它和你的照片一样

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

只需使用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 4

您可以使用此代码：

<!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>

它可能对你有帮助。

自定义多边形形状

4 个答案:

基于CSS的方法：

基于SVG的方法：