24

如何在 CSS 中制作这个盒子？

我看过一些教程，教如何创建带箭头的框，但是，就我而言，这些教程都不适合。

盒子

4

3 回答 3

33

我用周围的 1px 边框创建了你的元素。我正在使用一个<div>元素并利用:before和:after伪元素（browser-support）。主矩形有一个规则的 1px 边框，但三角形元素本质上是 2 个三角形，一个比另一个暗。

较浅的三角形位于较暗的三角形的顶部，具有隐藏它的效果，并且稍微向左移动以显示下面的较暗的三角形。产生的错觉是三角形本身的 1px 深色边框。

这是一个提出类似问题的问题：

如何使用纯 CSS 创建“工具提示尾部”？

其中一个答案实际上很好地解释了如何实现这种三角形效果：

https://stackoverflow.com/a/5623150/196921

此外，对于您可以用边框做的所有花哨的事情，这是一个很好的参考（感谢 PSCoder）：

...这是一个甜蜜的 CSS 生成器（感谢 David Taiaroa）：

无论如何，这是相应的代码：

    #arrow {
      width: 128px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #999;
      position: relative;
    }
    #arrow:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 128px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #ccc;
    }
    #arrow:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 129px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #999;
    }
<div id="arrow"></div>

于 2013-04-23T23:45:03.447 回答
7

这是我创建的解决方案

有两种简单的方法可以做到这一点。第一种效率较低的方法是使用 2 个元素。我利用了:after伪元素。我使用position:absolute了:after2 个原因。

  1. 您可以将元素放置在需要的位置
  2. 它可以防止三角形的末端被切断

创建三角形的关键是使用border属性。您有 2 个颜色为transparentset 的边框。这两个边界与您要走的方向相反。因此，如果您想制作直角三角形，请使用topand bottom。赋予箭头形状的是最后一个边框。它也朝着相反的方向发展。因此，对于直角三角形，您将使用border-left颜色。为了使它成为合适的高度，你必须做你想要放置它的盒子高度的一半

于 2013-04-23T23:58:21.550 回答
5

SVG是创建此类形状的推荐方法。它提供了简单性和可扩展性。

我们可以使用SVG'spolygon或pathelement 来创建像上面这样的形状，并用一些纯色、渐变或图案来描边/填充它。

只有一个属性points用于定义polygon元素中的形状。该属性由点列表组成。每个点必须有 2 个数字，一个 x 坐标和一个 ay 坐标。从最后一点到起点自动绘制一条直线以闭合形状。

以下是创建此形状的必要代码：

<polygon points="10,12 265,10 285,93 265,184 10,184"
         stroke="#333"
         stroke-width="2"
         fill="#eee" />

下面是对上述代码的简要说明：

  • points属性定义形状的结构。
  • stroke属性定义轮廓/边框的颜色。
  • stroke-width定义轮廓/边框的厚度。
  • fill属性定义要填充的内部形状的颜色。

输出图像：

多边形形状

工作示例：

body {
  background: #b6cdc7  url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" />
  </svg>
</div>

这个形状也可以用渐变或图案填充。

用渐变填充的多边形形状

工作示例：

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" />
  </svg>
</div>

我们可以使用SVG的过滤器在这个形状上应用阴影。

具有渐变和阴影的多边形形状

工作示例：

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
      <filter id="shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
        <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" filter="url(#shadow)" />
  </svg>
</div>

于 2017-08-29T13:02:08.167 回答