Html 如何在 div 标签上添加带边框的三角形

How to add bordered triangle over a div tag

提问by Mercurial

I have a div tag,

我有一个 div 标签，

 __________
|          |    
|          |    
|          |    
|__________|

I want to add a small triangle over it.

我想在它上面添加一个小三角形。

 _______/\_
|          |    
|          |    
|          |    
|__________|

Note: I want my div tag with border of certain color, and div body of another. Say, my div background will be white and border should be blue. See this please. http://fiddle.jshell.net/pausP/

注意：我希望我的 div 标签带有某种颜色的边框，以及另一种颜色的 div 主体。说，我的 div 背景将是白色，边框应该是蓝色。请看这个。 http://fiddle.jshell.net/pausP/

回答by Pete

Using the initial box with pointer and shadows at http://cssarrowplease.com/you can restyle them to make the shape you want:

在http://cssarrowplease.com/使用带有指针和阴影的初始框，您可以重新设置它们的样式以制作您想要的形状：

.arrow_box {
  top: 40px;
  position: relative;
  background: #ffffff;
  border: 1px solid #719ECE;  /*set border colour here*/
  width: 200px;
  height: 200px;
  border-radius: 3px;
  -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour  and size here*/
  -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
  filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}

.arrow_box:after,
.arrow_box:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 19px;
  left: 50%;
  margin-left: -19px;
}

.arrow_box:before {
  border-color: rgba(113, 158, 206, 0);
  border-bottom-color: #719ECE;
  border-width: 20px;
  left: 50%;
  margin-left: -20px;
}

<div class="arrow_box">
</div>

if you need to move the arrow further right, then just play with the leftfor .arrow_box:afterand .arrow_box:before

如果您需要将箭头进一步向右移动，则只需使用leftfor.arrow_box:after和.arrow_box:before

回答by Mohamed Allal

The answer of "Pete" above http://fiddle.jshell.net/pausP/3/show well how to do it, play also a little with the parameters to see how things work. And for those who don't get it well how it work read this article that show how the triangle are made, from the borders (i mean the principle). https://css-tricks.com/snippets/css/css-triangle.

http://fiddle.jshell.net/pausP/3/上面的“Pete”的答案很好地展示了如何做到这一点，也可以使用一些参数来看看事情是如何工作的。对于那些不太了解它是如何工作的人，请阅读这篇文章，该文章展示了三角形是如何从边界（我的意思是原理）制作的。 https://css-tricks.com/snippets/css/css-triangle。

Then it's just up to use before and after, well we may use just one depend on what we want, in fact before is used to make the blue triangle and after a white triangle they are superposed one above the other, with 1px diff in order to have that border in the triangle , but if not needed so you use just before for example. (you can change the margin in before with a little to see how it is). Hop that was helpful.

然后就可以使用之前和之后了，我们可能只使用一个取决于我们想要什么，实际上之前用于制作蓝色三角形，在白色三角形之后它们叠加在另一个上面，顺序为 1px diff在三角形中有那个边框，但如果不需要，那么你就在之前使用，例如。（您可以稍微更改之前的边距以查看它的情况）。跳这很有帮助。

回答by Robert Bolton

You could create the triangle image in a graphics editor then put that image into a DIV and then float that DIV to a fixed coordinate by absolute positioning the DIV and setting the TOP and LEFT coordinates.

您可以在图形编辑器中创建三角形图像，然后将该图像放入 DIV，然后通过绝对定位 DIV 并设置 TOP 和 LEFT 坐标将该 DIV 浮动到固定坐标。

回答by Deva

first of all you have to make an image like /\ with that you want a border color and then save that .png image your preferred location then move to css code for positioning that image and so use the following code:

首先，您必须制作像 /\ 这样的图像，并使用您想要的边框颜色，然后将该 .png 图像保存到您的首选位置，然后移动到用于定位该图像的 css 代码，因此使用以下代码：

background-image:url(images/triangle_img.png); background-repeat:no-repeat; background-position:top;

背景图片：网址（图片/triangle_img.png）；背景重复：不重复；背景位置：顶部；

And adding this code with your specified div styles. and i'm only giving code to place a triangle shape border with division border

并使用您指定的 div 样式添加此代码。我只给出代码来放置一个带分割边框的三角形边框