带有 CSS 的箭头框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16180107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arrow Box with CSS
提问by Nesta
How can I make this box in CSS?
如何在 CSS 中制作此框？
I've seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable.
我看过一些教如何创建带箭头的框的教程，但是，就我而言，这些教程都不适合。
回答by Hristo
I created your element with the surrounding 1px border. I'm using one <div>element and taking advantage of the :beforeand :afterpseudo-elements(browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.
我用周围的 1px 边框创建了您的元素。我正在使用一个<div>元素并利用:before和:after伪元素（browser-support）。主矩形有一个规则的 1px 边框，但三角形元素本质上是 2 个三角形，一个比另一个更暗。
The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.
较亮的三角形位于较暗的三角形的顶部，具有隐藏它的效果，并稍微向左移动以显示下方的较暗的三角形。由此产生的错觉是三角形本身的 1px 黑色边框。
Here's a question that asks a similar question:
这是一个提出类似问题的问题：
One of the answers actually has a great explanation of how one can achieve this triangle effect:
其中一个答案实际上很好地解释了如何实现这种三角形效果：
Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):
此外，这是您可以用边框做的所有奇特事情的绝佳参考（感谢 PSCoder）：
... and here's a sweet css generator (thanks to David Taiaroa):
...这是一个甜蜜的 css 生成器（感谢 David Taiaroa）：
Anyway, here's the corresponding code:
无论如何，这是相应的代码：
#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>回答by Cody Guldner
Hereis the solution I created
这是我创建的解决方案
There are 2 simple ways to do this. The first, less efficient way is to have 2 elements. I take advantage of the :afterpseudo element. I used position:absoluteon the :afterfor 2 reasons.
有两种简单的方法可以做到这一点。第一种效率较低的方法是使用 2 个元素。我利用了:after伪元素。我使用position:absolute了:after2 个原因。
- You can place the element where you need to
- It prevents the end of the triangle from being cut off
- 你可以把元素放在你需要的地方
- 它可以防止三角形的末端被切断
The key to creating the triangle is using the borderproperty. You have 2 borders with the color of transparentset. These 2 borders are opposite of the direction you want to go. So if you want to make a right triangle, then use topand bottom. What gives the arrow it's shape is the last border. It also goes in the opposite direction. So for a right triangle, you would use border-leftwith a color. To get this to be the proper height, you must do half of the height of the box you want to place it on
创建三角形的关键是使用border属性。您有 2 个带有transparentset颜色的边框。这 2 个边界与您要走的方向相反。因此，如果您想制作直角三角形，请使用top和bottom。赋予箭头形状的是最后一个边框。它也朝着相反的方向发展。所以对于直角三角形，你会使用border-left一种颜色。为了让它成为合适的高度，你必须做你想要放置它的盒子高度的一半
回答by Mohammad Usman
SVGis the recommended way to create such shapes. It offers simplicity and scale-ability.
SVG是创建此类形状的推荐方法。它提供了简单性和可扩展性。
We can use SVG's polygonor pathelement to create a shape like above and stroke / fill it with some solid color, gradient or a pattern.
我们可以使用SVG'spolygon或pathelement 来创建一个像上面一样的形状，并用一些纯色、渐变或图案来描边/填充它。
Only one attribute pointsis used to define shapes in polygonelement. This attribute consists of a list of points. Each point must have 2 numbers, an x coordinate and a y coordinate. A straight line is drawn automatically from the last point to the starting point to close the shape.
只有一个属性points用于定义polygon元素中的形状。该属性由点列表组成。每个点必须有 2 个数字，一个 x 坐标和一个 y 坐标。自动从最后一个点到起点绘制一条直线以闭合形状。
Below is the necessary code to create this shape:
下面是创建这个形状的必要代码：
<polygon points="10,12 265,10 285,93 265,184 10,184"
stroke="#333"
stroke-width="2"
fill="#eee" />
Below is a brief description of the above code:
下面是对上述代码的简要说明：
pointsattribute defines the structure of the shape.strokeattribute defines the color for the outline / border.stroke-widthdefines the thickness of the outline / border.fillattribute defines the color for the interior shape to be filled.
points属性定义了形状的结构。stroke属性定义轮廓/边框的颜色。stroke-width定义轮廓/边框的粗细。fill属性定义要填充的内部形状的颜色。
Output Image:
输出图像：
Working Example:
工作示例：
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>This shape can be filled with gradient or pattern as well.
这种形状也可以填充渐变或图案。
Working Example:
工作示例：
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>We can apply shadow on this shape using SVG's filters.
我们可以使用SVG的过滤器在这个形状上应用阴影。
Working Example:
工作示例：
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>