如何用css将三角形“^”放在内容框的顶部？

Question

#redbox{
width:100%;
height:152px;
background-color: #d12c3d;
}


.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
  height: 100px;
  width: 10%;
  display: inline-block;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #88b7d5;
	border-width: 50px;
	margin-left: -50px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #c2e1f5;
	border-width: 56px;
	margin-left: -56px;
}

<div class="jumbotron-fluid" id="redbox">
  <div class="arrow_box">
  </div>
  <div class="arrow_box">
  </div>
  <div class="arrow_box">
  </div>
  <div class="arrow_box">
  </div>
</div>

嗨我想在div上面放一个三角形。 div应该包含内容，而up三角形有图标。

在这个div里面，我想把其他div放在三角形上，我也需要它来反应。

我需要像这张图片https://i.stack.imgur.com/h75Vl.png

这样的输出

Answer 1

DEMO

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Xml;
using System.Xml.Linq;
using System.IO;


namespace ConsoleApplication31
{
    class Program
    {
        const string FILENAME = @"c:\temp\test.xml";
        static void Main(string[] args)
        {

            XDocument xdoc = XDocument.Load(FILENAME);

            var results = xdoc.Elements("root").Select(x => new
            {
                ns = x.Descendants("n").Select(y => new {
                    id = (long)y.Attribute("id"),
                    l = (double)y.Attribute("l"),
                    b = (double)y.Attribute("b")
                }).ToList(),
                ws = x.Descendants("w").Select(y => new {
                    id = (long)y.Attribute("id"),
                    rfs= y.Descendants("nd").Select(z => (long)z.Attribute("rf")).ToList()
                }).ToList()
            }).FirstOrDefault();

        }
    }

}

.box {
    position: relative;
    border: 2px solid #000;
  margin-top:35px;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-bottom-color: #000;
    border-width: 30px;
    margin-left: -30px;
}
.box:before {
    border-bottom-color: #000;
    border-width: 36px;
    margin-left: -36px;
}

.box {
	position: relative;
	border: 2px solid #000;
  margin-top:35px;
}
.box:after, .box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.box:after {
	border-bottom-color: #000;
	border-width: 30px;
	margin-left: -30px;
}
.box:before {
	border-bottom-color: #000;
	border-width: 36px;
	margin-left: -36px;
}