如何创建自定义形状 - css

Question

我想创建一个像这张图片一样的自定义形状：

我该怎么办？

我的 CSS :

#chevron { 
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px; 
  width: 200px; }

#chevron:before { 
  content: ''; 
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 0; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

我的 HTML 文件：

<div id="chevron">

</div>

但我的结果不是我想要的:

Answer 1

您可以跳过 CSS 并使用 svg:

Plunker

HTML:

<svg preserveAspectRatio="none" width="200px" height="100px">

  <polygon points="0,0 200,0 200,80 100,100 0, 80"
             style="fill:teal;stroke:rgba(0,0,0,1);stroke-width:0" />
</svg>

请注意，如果您需要圆角，svg 多边形可能会很棘手，因为它们本身不具有类似于 border-radius 的属性。您可以设置 stroke-linejoin="round" 然后调整 stroke 宽度属性来调整它的舍入程度。这适用于您可以将描边颜色设置为与填充颜色相同的实体形状，或者您可以使用不同颜色的边框。

HTML:

<svg width="300" height="200">

  <polygon points="10,10 210,10 210,90 110,110 10, 90"
             style="fill:teal;stroke:teal;stroke-width:10" stroke-linecap="round" stroke-linejoin="round" />
</svg>

Answer 2

给父级添加背景颜色div以填补空白
将 border-radius 放在父 div 上以创建两个圆角
使用 top: 20px 将 :before 和 :after 稍微向下移动，这样它们就不会超出 div

例子

这是下面的 fiddle：

#chevron {
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div id="chevron"></div>

Answer 3

我觉得你想写在这个形状上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS Example</title>
        <style type="text/css">
            #chevron{ 
                position: relative;
                text-align: center;
                padding: 12px;
                margin-bottom: 6px;
                height: 40px; 
                width: 200px;
                font-size:40px;
                color:#FFF;
                background:#3794d1;
                border-radius: 5px 5px 0 0;
            }
            #chevron:before{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                left: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, 6deg);
                -moz-transform: skew(0deg, 6deg);
                -ms-transform: skew(0deg, 6deg);
                -o-transform: skew(0deg, 6deg);
                transform: skew(0deg, 6deg);
            }
            #chevron:after{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                right: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, -6deg);
                -moz-transform: skew(0deg, -6deg);
                -ms-transform: skew(0deg, -6deg);
                -o-transform: skew(0deg, -6deg);
                transform: skew(0deg, -6deg);
            }
        </style>
    </head>
    <body>
        <div id="chevron">Welcome</div>
    </body>
</html>

如何创建自定义形状 - css

How to create a custom shape - css

html

css

css-shapes

例子