Question

如何在CSS中创建此框？

我已经看过一些教程如何用箭头创建盒子，但是，在我的例子中，这些教程都不合适。

box

Answer 1

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

较浅的三角形位于较暗的三角形的顶部，具有隐藏它的效果，并略微向左移动以显示下方较暗的三角形。由此产生的错觉是三角形本身的1px暗边界。

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

How can I create a "tooltip tail" using pure CSS?

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

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

此外，对于您可以使用边框（thanks to PSCoder）执行的所有奇特事情，这是一个很好的参考：

http://css-tricks.com/examples/ShapesOfCSS/

...这里是一个甜蜜的css生成器（thanks to David Taiaroa）：

http://cssarrowplease.com/

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

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

Answer 2

Here是我创建的解决方案

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

您可以将元素放在需要的地方
防止三角形的末端被切断

创建三角形的关键是使用border属性。您有2个边框，其颜色为transparent。这两个边界与您想要的方向相反。因此，如果您想制作一个直角三角形，请使用top和bottom。箭头的形状是最后一个边界。它也是相反的方向。因此，对于直角三角形，您可以使用border-left颜色。要使其达到合适的高度，您必须将要放置的盒子高度的一半放在

Answer 3

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

我们可以使用SVG的{{1}}或polygon元素来创建上面的形状，并使用一些纯色，渐变或图案来描边/填充它。

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

以下是创建此形状所需的代码：

polygon

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

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

带有CSS的箭头框

3 个答案: