Как создать div с заостренной вершиной с помощью CSS

Я вижу много связанных между собой streamов, которые в основном предлагают треугольники CSS в :: after или :: before pseudos, но ни один из них не был выведен. Я бросаю это, чтобы узнать, есть ли у кого-нибудь идеи.

Я ищу, чтобы создать div с заостренным или стадным верхом, который все еще поддерживает единую границу и коробку с остальной частью div.

См. Ссылку для изображения того, что я пытаюсь создать:

введите описание изображения здесь

Если вы не хотите использовать изображение, вы можете сделать что-то подобное. Но работать с изображением в этом случае намного проще.

body { background-color: #CCC; } .wrapper { } .outer { width: 0; height: 0; border-style: solid; border-width: 0 205px 32px 205px; border-color: transparent transparent #ffffff transparent; position: absolute; } .inner { width: 0; height: 0; border-style: solid; border-width: 0 200px 32px 200px; border-color: transparent transparent #ea2225 transparent; margin-left: -200px; margin-top: 5px; position: absolute; } .fix { background-color: #FFF; height: 10px; width: 410px; position: absolute; margin-top: 32px; } .red { width: 396px; height: 300px; background-color: #ea2225; margin-top: 37px; position: absolute; border-left: 7px solid #FFF; border-right: 7px solid #FFF; border-bottom: 6px solid #FFF; -webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); -moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); } 
 

это должно начать:

Обновить

Это обновленная скрипка, которая намного лучше представлена.

 .first { display: inline-block; width: 3em; height: 3em } .second { position: relative; display: inline-block; width: 3em; height: 3em } .third { position: absolute; display: inline-block; width: 0; height: 0; line-height: 0; border: 1.5em solid transparent; margin-top: -1em; border-bottom: 1em solid #007BFF; left: 0em; top: 0em } .forth { position: absolute; display: inline-block; width: 0; height: 0; line-height: 0; border: 1.5em solid #007BFF; border-bottom: 1.5em solid #007BFF; left: 0em; top: 1.5em }