如何创建自定义形状 - CSS

Question

如何创建自定义形状 - CSS

htmlcsscss-shapes

4

我希望创建一个类似于这张图片的自定义形状：

enter image description here

我该怎么做？

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

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

在此输入图片描述

- S.M_Emamian

你可以改变两个伪元素的top值，并在容器上设置overflow: hidden，或者你也可以使用渐变效果。了解这个形状将在哪里以及如何使用，是否会有文字等方面的信息，会更有助于给出更好的建议。 - Harry

有很多CSS形状生成器可供选择。例如：https://coveloping.com/tools/css-shapes-generator 和 http://bennettfeely.com/clippy/ - James Ives

3个回答

2

您可以跳过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宽度属性以调整其圆角程度。这对于可以将描边颜色设置为填充颜色相同的实心形状非常有效，或者如果您可以有一个不同颜色的边框。

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

- tpie

如何为形状的顶部设置border-radius: 4px？ - S.M_Emamian

稍微复杂一点的答案。我可以指导你正确的方向。SVG多边形没有边框半径设置，但在某些情况下，你可以通过描边设置进行一些小技巧。我会将其添加到plunker中，请稍等。 - tpie

使用CSS与SVG一起使用--svg {border-radius: 10px;}--似乎可以正常工作。 - misterManSam

嗯...有些不太对。它确实将样式应用于SVG元素的边框，但不是你用它绘制的内容。请查看我的plunker，您可以看到它产生的效果。我想在某些模糊的情况下这可能还可以。 - tpie

你可以考虑使用 path 元素代替 polygon 来制作圆角（参见这里）。 - web-tiki

0

我认为你想在这个形状上进行书写

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

- Adnan

请注意，如果您要从CSS形状中复制内容，请注明您的来源。不过，请注意该链接已经在[标签:css-shapes]标签wiki上了。 - jbutler483

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stanze · Accepted Answer

将背景颜色添加到父 div 中以填补间隙
在父 div 上放置 border-radius 以创建两个圆角
使用 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>